What I am trying to do is append a loading image to a div (so the user knows something is loading) and then I call a jquery ajax function, which is set to "async: false". Here is my code:
$jQuery("#playersListDiv").html(loadingImage);
$jQuery.ajax({
type: "POST", /* this goesn't work with GET */
url: urlValue, /*ex: "NBAgetGamesList.php" */
data: parameters, /*ex: "param1=hello" */
cache: false,
async: false,
success: function(data){
}
});
The problem is that the browser locks and does not append the loading image until AFTER the ajax call is done which is useless of course. Firefox is the only browser that actually appends the loading image. IE, Chrome, and Safari DO NOT append the loading image.
I know browser locking happens because async is set to false but this is my only option because I have to wait for this request to complete before continuing because I need the data that is returned.
Is there any way around this? If I place an alert after the I append the loading image that works but I don't want an alert popping up every time.
What I am trying to do is append a loading image to a div (so the user knows something is loading) and then I call a jquery ajax function, which is set to "async: false". Here is my code:
$jQuery("#playersListDiv").html(loadingImage);
$jQuery.ajax({
type: "POST", /* this goesn't work with GET */
url: urlValue, /*ex: "NBAgetGamesList.php" */
data: parameters, /*ex: "param1=hello" */
cache: false,
async: false,
success: function(data){
}
});
The problem is that the browser locks and does not append the loading image until AFTER the ajax call is done which is useless of course. Firefox is the only browser that actually appends the loading image. IE, Chrome, and Safari DO NOT append the loading image.
I know browser locking happens because async is set to false but this is my only option because I have to wait for this request to complete before continuing because I need the data that is returned.
Is there any way around this? If I place an alert after the I append the loading image that works but I don't want an alert popping up every time.
Share Improve this question edited Mar 18, 2012 at 7:10 user166390 asked Mar 18, 2012 at 2:22 RayRay 6853 gold badges7 silver badges15 bronze badges 5- 5 Synchronous, by definition, is "blocking". How it will affect browsers varies but usually blocks DOM updates and interaction. Make it asynchronous to "fix" the problem. – user166390 Commented Mar 18, 2012 at 2:24
- 1 Why not just make it asynchronous and put the code to run after this in a separate function. Then call the function in the return code? – Bob Commented Mar 18, 2012 at 2:26
- 2 "because I need the data that is returned." That is what callbacks are for. Your code does not have to be linear. – epascarello Commented Mar 18, 2012 at 2:27
- @Bob put what code after this? Epacscarello, there is a callback function. In this case it does need to be linear because I am waiting for data and then I use that data in the next block of code. – Ray Commented Mar 18, 2012 at 2:43
- @Ray - what they're saying (and as shown in my answer) is that you can move the entire next block of code into the success callback, or put it in a separate function that you call from the success callback, and then that block can make use of the returned data. – nnnnnn Commented Mar 18, 2012 at 2:50
3 Answers
Reset to default 12Despite your assertion to the contrary you don't need it to be synchronous. Whatever you need to do with/after the response can be done in the success (and/or error or complete) callback. So change:
$jQuery("#playersListDiv").html(loadingImage);
$jQuery.ajax({
...
async: false,
...
});
// OTHER CODE
to be like this:
$jQuery("#playersListDiv").html(loadingImage);
$jQuery.ajax({
...
async: true,
success: function(data) {
// OTHER CODE
}
});
Or move "OTHER CODE" to a separate function that you call from the success callback.
If you need something more complicated than that you could encapsulate the above in a function and pass a callback to it:
function doAjaxStuff(callback) {
$jQuery("#playersListDiv").html(loadingImage);
$jQuery.ajax({
...
async: true,
success: function(data) {
// optional other processing here, then:
callback(data);
}
});
}
// then from somewhere else in your code:
doAjaxStuff(function(data) {
// do something with data
});
What you want is jQuery.Deferred().
I came across this issue and I found a solution for it.
Suppose! you are really in need to use async : false in your ajax request and you want to show a loading Image while execution of ajax request. But ajax request is halting other UI operation (displaying of loading image) due to async : false. So, the simple solution for it, Use fadeIn to display loading image and fadeOut to hide loading image.
Here is a jsFiddle demo which contains a ajax request with async : false. Due to this, the loading Image in not displaying. (I used show method to display loading image.).
Here is another jsFiddle with fadeIn and fadeOut effect. It displays loading image regardless of async : false in ajax request.