17 replies to this topic

[wadesmart]

var errors = data.getElementsByTagName('error');

When I run the page my Firefox error console says:
data is null
add_employee.js line 44 -> which is the above line.

I checked my code against that downloaded from
the site and found no errors so I ran the code
from the site and had the same issue.

Ive been going over the code to see if I understand
what is happening but I just dont understand js
enough and what could be causing the errors.

wade

[Larry]

Have you confirmed the result being returned by the Ajax request?

[wadesmart]

Do you mean with this:


if(ajax.readyState == 4){
if((ajax.status == 200) || (ajax.status == 304)) {

which is inside the function handleResponse(ajax).

[Larry]

No, I mean the actual response from the actual server-side request. In other words, what the Ajax PHP script returns. Confirming that is always the first debugging step when it comes to Ajax.

[wadesmart]

Ok. Thanks for you response Larry.
After looking through the book and over the code, I dont understand how to do that yet.
Ill just put this book away until I understand js better.

[HartleySan]

What your error is saying is that the variable named "data" either doesn't exist or it does, but is equal to null. Most likely, the former is the case.

The getElementsByTagName method can only be called from DOM objects. If "data" is supposed to be a DOM object (but isn't), you should start by trying to figure out what's up with that. If you wanna post some code, we can maybe help you better.

Thanks.

[wadesmart]

Hartley, Im working with the code right out of the book that this forum is named after:

//add_employee.js
window.onload = init;
function init(){
var ajax = getXMLHttpRequestObject();

if(ajax){
  if(document.getElementById('results')){
   document.getElementById('emp_form').onsubmit = function(){
	 ajax.open('post', 'add_employee_xml.php');
	
	 ajax.onreadystatechange = function() {
	  handleResponse(ajax);
	 }
	
	 var fields = ['first_name', 'last_name', 'email', 'department_id', 'phone_ext'];
	
	 for(var i = 0; i < fields.length; i++){
	  fields[i] = fields[i] + '=' + encodeURIComponent(document.getElementById(fields[i]).value);
	 }
	 var values = fields.join('&amp;');
	 //alert(values);
	
	 ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	
	 ajax.send(values);
	 return false;
    }
  }
}
}
function handleResponse(ajax){
if(ajax.readyState == 4){
  if((ajax.status == 200) || (ajax.status == 304)) {

   var results = document.getElementById('results');

   document.getElementById('first_name_label').className = 'title';
   document.getElementById('last_name_label').className = 'title';
   document.getElementById('email_label').className = 'title';
   document.getElementById('department_id_label').className = 'title';
   document.getElementById('phone_ext_label').className = 'title';


   var data = ajax.responseXML;
   alert(data);

   var message = data.getElementsByTagName('result');
   var errors = data.getElementsByTagName('error');
   var temp = false;

   for(var i=0; i < errors.length; i++){
    temp = errors[i].firstChild.nodeValue;
    document.getElementById(temp + '_label').className = 'error';
   }

   results.innerHTML = message[0].firstChild.nodeValue;
   results.style.display = 'block';

  } else {
   document.getElementById('emp_form').submit();
  }
}
}

and then the page its calling:

<!--?php #add_employee_xml.php
header("Content-Type=text/xml");
echo '<?xml version="1.0" encoding="utf-8" standalone="yes" ?-->
<response>
';

require_once('mysql.inc.php');
$error = false;

if(!empty($_POST['first_name'])){
  $fn = mysql_real_escape_string($_POST['first_name'], $dbc);
} else {
  $error = true;
  echo '<error>first_name</error>
  ';
}

if(!empty($_POST['last_name'])){
  $ln = mysql_real_escape_string($_POST['last_name'], $dbc);
} else {
  $error = true;
  echo '<error>last_name</error>
  ';
}

if(!empty($POST['email'])){
  $e = mysql_real_escape_string($_POST['email'], $dbc);
} else {
  $error = true;
  echo '<error>email</error>
  ';
}

if(isset($_POST['department_id']) &amp;&amp; is_numeric($_POST['department_id']) &amp;&amp; ($_POST['department_id'] > 0)){
  $did = (int) $_POST['department_id'];
} else {
  $error = true;
  echo '<error>department_id</error>
  ';
}

if(isset($_POST['phone_ext']) &amp;&amp; is_numeric($_POST['phone_ext']) &amp;&amp; ($_POST['phone_ext'] > 0)) {
  $ext = (int) $_POST['phone_ext'];
} else {
  $error = true;
  echo '<error>phone_ext</error>
  ';
}

// no errors
if(!$error){
  $query = "INSERT INTO employees (department_id, first_name, last_name, email, phone_ext) VALUES (NULL, $did, '$fn', '$ln', '$e', $ext)";

  $result = mysql_query($query, $dbc);

  if(mysql_affected_rows($dbc) == 1){
   echo '<result>The employee has been added.</result>
   ';
  } else {
   echo '<result>The employee could not be added due to a system error.</result>
   ';
  }

} else {
  echo '<result>Please correct problems with the highlighted field(s) below.</result>
  ';
}

mysql_close($dbc);
echo '</response>
';
?>

I went back through and put the '; on a new line just like in the book thinking maybe it had to be that way to not mess up the xml.

[HartleySan]

Here's your problem, right here:
var data = ajax.responseXML;

For whatever reason, nothing is being output from the add_employee_xml.php script.
To be honest, I always use responseText and not responseXML, so I'm not sure what is causing this problem, but I do know that XML is very temperamental. Unless XML syntax is 100% correct, an error will occur and nothing works.

You may want to double-check your XML syntax in the add_employee_xml.php script. There may be some small typo. In the meantime, I will look into what could potentially be causing this error. Please be patient and let me know if you find anything.

Thanks.

[HartleySan]

The more I look at your code, the more I'm wondering about the first line in your PHP file.
<!--?php #add_employee_xml.php

Is that right? I could be wrong, but doesn't the opening PHP tag have to be "<?php"?

If the opening tag is wrong, then I imagine that the entire PHP script is skipped over, in which case, nothing will be stored in responseXML.

[wadesmart]

Im just looked at that.... the <!-- isnt in my code.
Its only in the code I posted here.

This is what I have


<?php #add_employee_xml.php
header("Content-Type=text/xml");
echo '<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<response>
';

[wadesmart]

Im testing something .....

<?php
   phpinfo();
?>

[wadesmart]

Ok.. I noticed it only did that with the php tag at the top and thought maybe the page logic
inserted the dashes itself but the above test says it didnt.

Anyway, I dont know why that showed up but its not in my actual code.

[Larry]

In any case, the next step would be to verify the result that add_employee_xml.php returns. If your browser has a network monitor, it will show the request details, including the response.

[HartleySan]

Yeah, like what Larry said, I recommend trying to return a very basic string from the add_employee_xml.php script, and try to grab it on the JS side with responseText. If that works, then you know there is a problem somewhere in the add_employee_xml.php script.

[wadesmart]

FOUND IT!!!

header("Content-Type=text/xml"); should be header("Content-Type:text/xml");

Changed that - its all fine.

OMGOSH that is crazy that one little thing like a = instead of a : can do that.

Ok.. thanks for the help - moving on with the book

[Larry]

Excellent. Kudos for figuring that out and thanks for sharing the solution. That is the joy of programming: one little mistake can render everything useless!

[HartleySan]

Yes, that's the way XML is. It's good in that it keeps you honest in your coding, but can be frustrating.
I certainly didn't have the XML header memorized, so I would have never spotted that.

Good job!

[HartleySan]

Oh, wait, my bad. I just realized what you were talking about, the header function in PHP. Yes, that is right. The colon is required.
I didn't even notice that when I looked at your code. Nice!