Question

I’m trying to write a very simple function which displays a div that says “Loading…”, then makes a jQuery ajax() call, and once complete, hides the loading div. The code works perfectly in Firefox, but IE 7 (maybe 8/9 as well, tested on 7 only) and Chrome both have issues:

function ajaxwl(url) {
    $('#loadingDiv').show();
    var xmlHttp=$.ajax({type: "GET",
        url: url,
        async: false });
    $('#loadingDiv').hide();
    return xmlHttp;
}

I stepped through the code with the Chrome debugger, and then it worked – the loading div was displayed as expected. If I run the code without the debugger, however, Chrome (and IE 7) load the AJAX request without ever showing the loading div. Perhaps it has something to do with the fact that Chrome is locking up the browser, as I am using a non-asynchronous request?

EDIT: I ended up converting the request to an asynchronous request (a conversion which needed to be done everywhere in this code I inherited, but I had been procrastinating…) and now all works as expected:

function ajaxwl(url) {
    $('#loadingDiv').show();
    var xmlHttp=$.ajax({type: "GET",
        url: url
    }).done(function() {
        $('#loadingDiv').hide();
    });
    return xmlHttp;
}

Thanks for the quick responses!

Answer 1

The loading div is not visible in IE because you are using AJAX in synchronous mode due to which the js execution hangs the browser and you will not see when it is visible and when it gets hidden. In all other browsers the js execution is pretty fast so you can see it.