Why does this jQuery Ajax call fail ONLY in IE9 (Even works fine in IE8 and IE7)

Question

I have a website where I make an ajax call like this:

            // perform an ajax request to generate a new subscriber account
            jQuery.ajax({
                type: 'POST',
                url: '/index.php?option=com_content&view=article&id=45&tmpl=component',
                data: postVars,
                success: handleResponse,
                error: function(jqXHR, textStatus, errorThrown) {
                    alert ('response: ' + jqXHR.responseText);
                    alert ('code: ' + jqXHR.getResponseHeader('X-Subscriber-Status'));
                }
            });

The page being requested doesn't do anything but return a single digit status code and it works fine with every browser except for IE9. The script is hosted on the same domain as the page it's requesting so there shouldn't be any issue with cross domain scripting.

I finally tracked down what's happening but I don't know how to fix it. It turns out that the Ajax request completes successfully with no problems. I verified this by using Fiddler to look a the network traffic. The server responds to the request with an HTTP status code of 200 and the body doesn't contain anything but a single digit response code. At this point jQuery executes the error handler, NOT the success handler as would be expected (in IE9). Why does it do this and how can I prevent it?? This ONLY happens in IE9. Even IE8 and IE7 work just fine with the exact same code! As you can see I finally resorted to detecting IE9 and using an XmlHttpRequest object to do it (which works just fine by the way).

This seems like a jQuery bug to me but I can't find any mention of it in my searches. Am I really the only one experiencing this odd behavior?

Answer 1

Well I finally tracked down the problem. It turns out that for some reason jQuery/IE does not correctly urlencode double quotes. The URL of the request was:

/search.json?callback=jQuery16105234487927080267_1313510362362&q=stocks OR "stock market" -blueprint -empireavenue.com -learn&_=1313510362469

In every other browser by the time jQuery performed the ajax request it looked like:

/search.json?callback=jQuery16105234487927080267_1313510362362&q=stocks%20OR%20%22stock%20market%22%20-blueprint%20-empireavenue.com%20-learn&_=1313510362469

but for whatever reason in all versions of IE it came out like this:

/search.json?callback=jQuery16105234487927080267_1313510362362&q=stocks%20OR%20"stock%20market"%20-blueprint%20-empireavenue.com%20-learn&_=1313510362469

which caused the server to return no data.

Answer 2

Are you sure that the URL you're calling ( /index.php?option=com_content&view=article&id=45&tmpl=component ) works in IE9? If you load that PHP page up in IE9, does it return the expected result? It should do, but it's worth checking that the error is in the jQuery call, rather than the PHP.

Also, a POST call would usually be to a page like 'index.php', with the query string ( option=com_content , view=article etc.) sent as the variable postVars .

Try using the following:

$.ajax({
    type: "POST",
    url: "index.php",
    data: {
        option : com_content,
        view : article,
        id : 45,
        tmpl : component
    },
    success: function(msg){
        console.log(msg);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(textStatus)
    }
});

Strip down the function to its basic parts, and you should be able to see where the error is coming from.