Title: Loading div for AJAX call doesn't display in IE or Chrome, works fine in Firefox
Tags: javascript;jquery;ajax;internet-explorer;google-chrome
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!

Comment: You're right. You kicked me into gear to convert all my requests to be asynchronous. Thanks.

Comment: You probably should be using asynchronous requests, I'm not sure if that's causing the problem but having JS execution stop while performing network tasks is bad practice.

Here is the accepted answer: 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.

Comment for this answer: You should basically hide the loading div when the ajax call response comes.

Here is another answer: i had same problem in IE a while ago. Inspecting the problem revealed that html that was returned by ajax request was malformed (missing closing tag etc.) and IE is very unforgiving in such scenarios. Maybe you have the same issue here.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2011:00:07/27/11', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><ajax><internet-explorer><google-chrome>', 'Title': "Loading div for AJAX call doesn't display in IE or Chrome, works fine in Firefox", 'ViewCount': 1863, 'id': 6848823, 'user_AboutMe': None, 'user_AccountId': 463235.0, 'user_DisplayName': 'royaldark', 'user_Reputation': 35.0, 'user_Views': 6.0, 'user_id': 866002.0}}