jQuery not working in Internet Explorer 9 (but works in Firefox, Chrome and Opera)

Question

I wrote a jQuery script that works in Chrome, Firefox and Opera but not in Internet Explorer 9.

Basically, an image loaded in the background with ajax should fadein and be replaced dynamically as others images are uploaded in the same folder. In Internet Explorer the script just doesn't work and the image is not loaded.

I tried debugging with firebug and the IE developer toolbar but I am a little bit inexperienced.

Can you help me out? Thank you!

jQuery code

$(window).load(function () {
    var data;
    $('.nascosto').hide();
    $('.ciccio').hide();

    $.ajax({
        type: "GET",
        url: "phpdelete.php",
        success: function (data) {

            $("<img/>").attr("src", data).load(function () {
                $(this).remove();
            });
        }
    });


    setInterval(prova, 1000);

    function prova() {
        $.ajax({
            type: "GET",
            url: "phpdelete.php",
            success: function (data2) {
                if (data2 != data) {
                    $('.ciccio').fadeOut(2000, function () {
                        $("<img/>").attr("src", data2).load(function () {
                            $(this).remove();
                            $('.ciccio').css('background-image', 'url(' + data2 + ')').delay(500).fadeIn(2000);
                            data = data2;
                        });
                    });
                }
            }
        });
    }

});

You need to debug this somehow and figure out what starts breaking first. — Blender, Aug 17 '13 at 16:08
You should really indent your code the next time. It **definitely** helps when it comes to debugging. (I've just cleaned it using jsFiddle *TidyUp*.) — ComFreek, Aug 17 '13 at 16:32
I am aware that I need to debug, problem is I don't know how it is done :) I tried creating a jsfiddle (http://jsfiddle.net/4VD37/), but in my script there's an ajax request for an external php page and it doesn't work on JSFiddle... is it actually possible to make an ajax request to another server? Sorry, I am still learning the ropes! — user1190547, Aug 17 '13 at 16:37
.load(function) is obsolete since 1.8, you need to stop using it (and read jquery release notes when they come out to prevent these kinds of oops problems) .load is meant for loading data via ajax: http://api.jquery.com/load-event/ — Robert Hoffmann, Aug 17 '13 at 16:40
Thank you! I have replaced it with the document ready alternative: do you have any other suggestion? — user1190547, Aug 17 '13 at 16:44
Your welcome. $("").attr("src", data2).load(function () {} why are you calling load here (this is not a place to call ready either) ? also why is it followed by $(this).remove() ..gives me the impression you are setting a value and then trashing it all right after ..might be wrong though — Robert Hoffmann, Aug 17 '13 at 16:46
Maybe you meant: $("").attr("src", data2).one('load', function () {}) — Robert Hoffmann, Aug 17 '13 at 16:48
I actually got that from here: http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded as a way of ensuring that a background image loaded in the css was already loaded before showing it — user1190547, Aug 17 '13 at 16:51
That post is wrong it's based on this fiddle (see that posts comments) http://jsfiddle.net/qe4nx/9/ Using this is enough $("").attr("src", data2).one('load', function () {}) you should not use the $(this).remove() as it refers to the image itself, the post you got it from was refering to a variable, not the image itself. Also it should be .one() not .on(), as .on() will add additional event handlers each time you call the function, .one() adds one unique handler — Robert Hoffmann, Aug 17 '13 at 17:40
I replaced the code with the one you suggested but the script doesn't work, no image is loaded — user1190547, Aug 17 '13 at 17:57

score 0 · Accepted Answer · edited May 23 '17 at 11:49

I solved the problem. The debugging itself couldn't help me because the code is actually clean: even with the Internet Explorer 9 developer tools console I found no errors.

Since there were no errors but still no image loaded, the problem had to lie within the ajax call. I added this code in order to alert in case of an error:

jQuery code

error: function (jqXHR, textStatus, errorThrown) {
    alert(textStatus);
    alert(errorThrown);
}

Chrome showed no error, while Internet Explorer alerted a NoTransport error. After some searching, I found this thread 'No Transport' Error w/ jQuery ajax call in IE that suggested adding this before the ajax call:

$.support.cors = true;

And it works.

jQuery not working in Internet Explorer 9 (but works in Firefox, Chrome and Opera)

1 Answers1