jquery ajax fail in IE only

Question

I recently refactored some ajax code to make it asynchronous. It was working perfectly before, but I wanted to use jQuery promises, so I jQuerified it. Now, however, the ajax call works in every browser but IE.

IE9 throws the error where the ajax function is assigned a variable name. The error in IE is:

"Object doesn't support this method or property on line 99."

Here's a chunk where the error occurs:

if (screen.width > 525 && svgSupported) {
    $loadingSvg = $.ajax({
        type: 'GET',
        url: 'images/mypicture.svg',
        dataType: 'xml',
        success: function(data){
            console.log("Ajax request successfully returned: " + data);
            console.log(data);
        },
    error: function(data){
        console.log("Ajax request failed: " + data);
        }
});
}

I've tried some obvious things other people in similar situations have suggested on SO, like wrapping everything in jQ $(document).ready. That doesn't fix it. The $loadingSvg variable is declared globally at the top of the script, so that ain't it. Any ideas, folks?

This is a friendly tip, you may have a problem above because your code is requesting the same image each time. But you might want to look out for caching that occurs when making GET ajax requests in IE. IE will cache your GET requests unless you specify => "cache: false" in your ajax options. Or you could add this somewhere that is loaded with all your javascript: $.ajaxSetup ({ // Disable caching of AJAX responses cache: false }); — antony, Jun 26 '12 at 03:49
Thanks, but that's want I want to do: cache the image, for performance reasons. I'm leaving the cache option at the default `'true'`. If a GET request is fired for a file that is discovered to already be in the browser's cache, I assume that in all cases the request is still returned as successful.(?) Is there a documented discrepancy between browsers on this point? — Ben, Jun 26 '12 at 17:21

score 1 · Accepted Answer · answered Jun 26 '12 at 02:56

1

The issue is actually your console.log line:

console.log("Ajax request successfully returned: " + data);

More specifically, IE can't seem to concatenate an XML document with a string, or indeed XML anything with a string. They don't support .toString(). Just remove that part and continue working :)

answered Jun 26 '12 at 02:56

Ry-

218,210
55
464
476

Or use `if (window['console']) console.log('bla');` ...that works in all browsers, error free. – N Rohler Jun 26 '12 at 03:02
@NRohler: No, it's not `console.log` that's not working, it's the concatenation of `"Ajax request successfully returned: "` and `data`. (What, you didn't know Internet Explorer had its own set of extensive developer tools too? `;)`) – Ry- Jun 26 '12 at 03:03
My bad about the source of the error... I skimmed over the IE*9* part. But earlier IE versions will throw the error about using console.log. [Reference for curious visitors in the future](http://stackoverflow.com/questions/690251/what-happened-to-console-log-in-ie8) – N Rohler Jun 26 '12 at 03:06
Ach! That was it. Sometimes I forget how Chrome Dev Tools spoils me. IE error messages aren't always the most informative... – Ben Jun 26 '12 at 17:28

jquery ajax fail in IE only

1 Answers1