JQuery.ajax gives "TypeError: Can not read property" documentElement "null" on the server, but not local

Question

I have a problem with jQuery code at http://alpha.spherecat1.com/ , but the local copy works fine. As you can see, if you are visiting the site now, the ajax call causes the following error:

"TypeError: Unable to read documentElement" null "property

I checked and double-checked and rebooted everything I could think of. The documentation states that I am sending the correct MIME type, which I did to no avail. Here's the abusive code:

function changePageAJAX(newPage, method) { if (method != "replace") { window.location.hash = newPage; } newPage = newPage.substring(1); // Remove the hash symbol. title = "SphereCat1.com | " + fixCase(newPage.replace(/\//g, " > ")); // Set the window title. newPage = "ajax/" + newPage + ".html"; // Add path. if (newPage == currentPage) { return; // Don't let them load the current page again. } $.ajax({ // jQuery makes me feel like a code ninja. url: newPage, dataType: "xml", success: function(data, status, xmlhttp){ renderPage(xmlhttp); }, error: function(xmlhttp, status, error){ alert(error); renderPage(xmlhttp); } }); document.title = title; currentPage = newPage; } 

He then translates the page into a div. The pages that it captures are visible in the / ajax folder at the previous URL. Any help you can provide would be greatly appreciated!

Answer 1

The error is called from an ajax call:

 error: function(xmlhttp, status, error)... 

Since you are expecting an XML data type, calling for "ajax / home.html" url will return the mime type "text / html". You might want to completely omit dataType for jQuery smart guessing to run it. For instance:

 $.ajax({ // jQuery makes me feel like a code ninja. url: newPage, success: function(data, status, xmlhttp){ renderPage(xmlhttp); }, error: function(xmlhttp, status, error){ alert(error); renderPage(xmlhttp); } }); 

Do you also have alert() in appendCSS , which I assume for debugging ?:

 function appendCSS(filename) { alert(filename); if (filename != null) { $("head").append("<link rel='stylesheet' id='extracss' href='"+filename+"' type='text/css' />"); } }