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?

Answer 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 :)