Ajax with PHP and XML, getElementsByTagName IE issue

Question

I'm having an issue with getElementsByTagName in IE (7 and 8).

I have an address lookup that returns each suggested address (as a string of XML) into a PHP session variable, which is then accessed using an AJAX function that returns the requested session variable.

Each session variable is set in step 1 of the ajax address lookup (I have tried with without the character encoding and with utf-8):

$_SESSION['addrHint_' . $k1] = '<?xml version="1.0" encoding="ISO-8859-1"?>';
$_SESSION['addrHint_' . $k1] .= '<Address>';
$_SESSION['addrHint_' . $k1] .= '<Postcode>' . $v1->Postcode . ' </Postcode>';
$_SESSION['addrHint_' . $k1] .= '<Line1>' . $v1->Line1 . ' </Line1>';
$_SESSION['addrHint_' . $k1] .= '<Line2>' . $v1->Line2 . ' </Line2>';
$_SESSION['addrHint_' . $k1] .= '<Line3>' . $v1->Line3 . ' </Line3>';
$_SESSION['addrHint_' . $k1] .= '</Address>';

And then retrieved in step 2:

header('Content-Type: text/xml');
print_r( $_SESSION['addrHint_'.$_REQUEST['addr']] );

In the AJAX js, when the state is ready, it performs amongst other similar lines of code, this:

var xmlDoc = xmlHttp.responseXML;
var xmlRoot = xmlDoc.documentElement;
var postcode = xmlRoot.getElementsByTagName("Postcode")[0].childNodes[0].nodeValue;
document.forms[0]["address"+addr+"_Postcode"].value = postcode.substring(0, postcode.length-1);

(It does a similar thing for each line of the address.) The length-1 snippet is in there because I had to append a space to each element to stop an issue I was having when an element was null.

It works fine in Firefox, but not at all in IE. I have since been Googling and found a number of results among the first 5 pages but no solutions. I'd be most grateful if anyone could shed some light on this.

Thanks in advance.

Answer 1

print_r???

print_r( $_SESSION['addrHint_'.$_REQUEST['addr']] );

"$SESSION['addrHint'.$_REQUEST['addr']]" is not an array.

Answer 2

Use the IE developer tools (IE8: built-in, IE7: Developer Toolbar) to debug the javascript.
You might also want to add some console debug code e.g. to track the readystate.
On the server-side set php's error_reporting to E_ALL and keep an eye on the webserver's error.log (where the php messages will show up)

Answer 3

As per my comment, I have since added ' null' to each address field. It seems the space wasn't enough. I appreciate that this is perhaps not the most elegant solution but when combined with substring(0,string.length-5) it works.

Answer 4

Instead of modifying your return values, maybe you should implement some error checking around the code that fetches your node values.

If you do a ton of chaining you can't check for nulls. Instead of chaining like this:

xmlRoot.getElementsByTagName("Postcode")[0].childNodes[0].nodeValue

Why not add some error checking before hand? Something like:

var postCodes = xmlRoot.getElementsByTagName("Postcode");
if( postCodes && postCodes[0] && postCodes[0].childNodes[0] ) {
    document.forms[0]["address"+addr+"_Postcode"].value = postCodes[0].childNodes[0].childNodes[0].nodeValue;
}

That way you'll only attempt the assignment if there's no data there. Getting a blank input value where you expect it.

Now, all that chaining and if statement can get tiresome, so you can wrap that in a function if you like.

Feel free to check a working example here: http://jsbin.com/ahidu

Cheers!