javascript error: "data.getElementsByTagName is not a function"

Question

Hi, I've spent hours on this stupid error, so any help would be appreciated!

I'm using Jquery to request xml from a python file hosted on google appengine. I'm then trying to process the xml.

Here's the response to the post request obtained from firebug:

<?xml version="1.0" encoding="ISO-8859-1"?><building key='agdhcHRydXNochALEglCdWlsZGluZ3MY3x4M' bldname='test'></building>
Status: 200 OK
Cache-Control: no-cache
Content-Type: application/xml
Content-Length: 0

And here's the javascript that handles the data:

jQuery.post(toLoad,formInput,function(data){                
            alert(data.getElementsByTagName("building"));
    })

Here's the error I get from firebug:

data.getElementsByTagName is not a function
anonymous("<?xml version="1.0" encoding="ISO-8859-1"?><building key='agdhcHRydXNochALEglCdWlsZGluZ3MY4B4M' bldname='test'></building>\nStatus: 200 OK\r\nCache-Control: no-cache\r\nContent-Type: application/xml\r\nContent-Length: 0\r\n\r\n")viewBuilding.js (line 120)
I()jquery.min.js (line 19)
anonymous(6)jquery.min.js (line 19)
[Break on this error] alert(data.getElementsByTagName("building"));\n

I've used that particular bit of javascript in order parts of the site to process xml, so my gut tells me that the javascript is correct, maybe the format of the data is wrong? I'm stuck. :/

Thanks!

Answer 1

Try to force jQuery to recognize the returned data as xml by using

jQuery.post(toLoad, formInput,
  function(data, textStatus) {
    // now check if data is set and what the status is
    alert(data);
    alert(textStatus);
    //alert(data.getElementsByTagName("building"));
  },
  'xml'
);

Btw. what looks suspicious to me is the Content-Length: 0 header.

---

Based on your comment I conclude that the page which produces your xml is bogus. It first outputs the xml and after that some http-headers follow as data. Which of course can't be valid xml. Thus jQuery correctly determines the returned data to be of format text.

You must output all headers before you output a single line of xml.

Answer 2

Well, Time to go through a checklist of sorts.

I'm going to assume that data is properly assigned and that you have verified that it contains you "data". Now since it is giving you an error that the function does not exist we then know that it truly hasn't been found for some reason, because otherwise the function would return a null node if it found no tags by that name.

I'm curious as to whether you are having the XML in the same file as the javascript, because in that case wouldn't you need to specify the document, not your data? I know that the scenario I'm talking about is what I would do for initial testing, so I just wanted to be certain on that.

If you are referencing an external XML with data, then truthfully there should be no problems.

Really it seems to all just be revolving around the variable data. It seems to me that for some reason maybe data is either not referring to the correct element, or it is not referring to anything.

Hope this helps, David.

Answer 3

The response from the GAE server is wrong. It has the headers below the XML data, as part of the response body. That wouldn't be a valid XML document; without the headers appearing properly at the top, there's no active Content-Type header to tell jQuery that the incoming document is XML. Consequently it is sending you a plain text data response and not the XML document you wanted. The error comes because you can't call getElementsByTagName on a String.

Probably the author of the GAE app has forgotten how to write WSGI applications and is simply spitting the XML document out to standard output:

print xml
    ...
start_response('200 OK', [('Content-Type', 'text/xml')])
return []

instead of returning it correctly to the server to process:

start_response('200 OK', [('Content-Type', 'text/xml')])
return [xml]

Which would explain why the server thought Content-Length was 0.