Jump to content



Photo

Ch5, Pg77 Var Errors Returns Null


  • Please log in to reply
17 replies to this topic

#1 wadesmart

wadesmart

    Newbie

  • Members
  • Pip
  • 10 posts
  • LocationOklahoma

Posted 24 January 2012 - 9:02 PM

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
  • 0

#2 Larry

Larry

    Administrator/Writer

  • Administrators
  • 4,003 posts
  • LocationState College, PA (USA)

Posted 25 January 2012 - 11:29 AM

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

#3 wadesmart

wadesmart

    Newbie

  • Members
  • Pip
  • 10 posts
  • LocationOklahoma

Posted 25 January 2012 - 11:33 AM

Do you mean with this:


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

which is inside the function handleResponse(ajax).
  • 0

#4 Larry

Larry

    Administrator/Writer

  • Administrators
  • 4,003 posts
  • LocationState College, PA (USA)

Posted 25 January 2012 - 11:53 AM

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.
  • 0

#5 wadesmart

wadesmart

    Newbie

  • Members
  • Pip
  • 10 posts
  • LocationOklahoma

Posted 25 January 2012 - 2:58 PM

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.
  • 0

#6 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 3,004 posts
  • LocationColumbus, OH USA

Posted 26 January 2012 - 7:57 AM

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.
  • 0

#7 wadesmart

wadesmart

    Newbie

  • Members
  • Pip
  • 10 posts
  • LocationOklahoma

Posted 26 January 2012 - 11:13 AM

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.
  • 0

#8 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 3,004 posts
  • LocationColumbus, OH USA

Posted 26 January 2012 - 9:42 PM

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.
  • 1

#9 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 3,004 posts
  • LocationColumbus, OH USA

Posted 27 January 2012 - 1:29 AM

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.
  • 1

#10 wadesmart

wadesmart

    Newbie

  • Members
  • Pip
  • 10 posts
  • LocationOklahoma

Posted 27 January 2012 - 9:10 AM

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>
';
  • 0

#11 wadesmart

wadesmart

    Newbie

  • Members
  • Pip
  • 10 posts
  • LocationOklahoma

Posted 27 January 2012 - 9:12 AM

Im testing something .....

<?php
   phpinfo();
?>

  • 0

#12 wadesmart

wadesmart

    Newbie

  • Members
  • Pip
  • 10 posts
  • LocationOklahoma

Posted 27 January 2012 - 9:13 AM

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.
  • 0

#13 Larry

Larry

    Administrator/Writer

  • Administrators
  • 4,003 posts
  • LocationState College, PA (USA)

Posted 27 January 2012 - 9:19 AM

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.
  • 0

#14 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 3,004 posts
  • LocationColumbus, OH USA

Posted 27 January 2012 - 9:54 AM

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.
  • 0

#15 wadesmart

wadesmart

    Newbie

  • Members
  • Pip
  • 10 posts
  • LocationOklahoma

Posted 27 January 2012 - 7:26 PM

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 :D
  • 0

#16 Larry

Larry

    Administrator/Writer

  • Administrators
  • 4,003 posts
  • LocationState College, PA (USA)

Posted 27 January 2012 - 8:21 PM

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!
  • 0

#17 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 3,004 posts
  • LocationColumbus, OH USA

Posted 28 January 2012 - 12:10 AM

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!
  • 0

#18 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 3,004 posts
  • LocationColumbus, OH USA

Posted 28 January 2012 - 12:17 AM

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!
  • 0