jQuery.ajax gives "TypeError: Cannot read property 'documentElement' of null" on server but not local.

Question

I'm having a problem with my jQuery code on http://alpha.spherecat1.com/, but the local copy works fine. As you can see if you visit the site now, the ajax call gives the following error:

"TypeError: Cannot read property 'documentElement' of null"

I've checked and rechecked and reuploaded everything I can think of. The documentation said to make sure I was sending the right MIME type, which I did to no avail. Here's the offending 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;
}

It then goes on to render the page into a div. The pages it's grabbing are visible in the /ajax folder at the previous url. Any help you can provide would be greatly appreciated!

Answer 1

The error is thrown from the ajax call:

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

Since you are expecting a XML dataType, the call for "ajax/home.html" url will return a mime type "text/html". You might want to omit the dataType totally for jQuery's intelligent guess to kick in. E.g.:

$.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); }
});

You also have the following alert() in appendCSS which I assume is for debugging?:

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