wadesmart Posted January 25, 2012 Share Posted January 25, 2012 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 Link to comment Share on other sites More sharing options...
Larry Posted January 25, 2012 Share Posted January 25, 2012 Have you confirmed the result being returned by the Ajax request? Link to comment Share on other sites More sharing options...
wadesmart Posted January 25, 2012 Author Share Posted January 25, 2012 Do you mean with this: if(ajax.readyState == 4){ if((ajax.status == 200) || (ajax.status == 304)) { which is inside the function handleResponse(ajax). Link to comment Share on other sites More sharing options...
Larry Posted January 25, 2012 Share Posted January 25, 2012 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. Link to comment Share on other sites More sharing options...
wadesmart Posted January 25, 2012 Author Share Posted January 25, 2012 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. Link to comment Share on other sites More sharing options...
HartleySan Posted January 26, 2012 Share Posted January 26, 2012 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. Link to comment Share on other sites More sharing options...
wadesmart Posted January 26, 2012 Author Share Posted January 26, 2012 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('&'); //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']) && is_numeric($_POST['department_id']) && ($_POST['department_id'] > 0)){ $did = (int) $_POST['department_id']; } else { $error = true; echo '<error>department_id</error> '; } if(isset($_POST['phone_ext']) && is_numeric($_POST['phone_ext']) && ($_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. Link to comment Share on other sites More sharing options...
HartleySan Posted January 27, 2012 Share Posted January 27, 2012 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 Link to comment Share on other sites More sharing options...
HartleySan Posted January 27, 2012 Share Posted January 27, 2012 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 Link to comment Share on other sites More sharing options...
wadesmart Posted January 27, 2012 Author Share Posted January 27, 2012 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> '; Link to comment Share on other sites More sharing options...
wadesmart Posted January 27, 2012 Author Share Posted January 27, 2012 Im testing something ..... <?php phpinfo(); ?> Link to comment Share on other sites More sharing options...
wadesmart Posted January 27, 2012 Author Share Posted January 27, 2012 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. Link to comment Share on other sites More sharing options...
Larry Posted January 27, 2012 Share Posted January 27, 2012 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. Link to comment Share on other sites More sharing options...
HartleySan Posted January 27, 2012 Share Posted January 27, 2012 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. Link to comment Share on other sites More sharing options...
wadesmart Posted January 28, 2012 Author Share Posted January 28, 2012 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 Link to comment Share on other sites More sharing options...
Larry Posted January 28, 2012 Share Posted January 28, 2012 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! Link to comment Share on other sites More sharing options...
HartleySan Posted January 28, 2012 Share Posted January 28, 2012 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! Link to comment Share on other sites More sharing options...
HartleySan Posted January 28, 2012 Share Posted January 28, 2012 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! Link to comment Share on other sites More sharing options...
Recommended Posts