Need assistance in ajax spinner displaying

Question

I am making an ajax request which actually looks like this.

$loading = $("#loadingDiv")
function loadBuildList() {
    $.ajax({
    async:true,
    url:"ajax_test.php",
    beforeSend : function() { $loading.show(); },
    success : function() { $loading.hide() }
    });
}

Now, I need to display a spinner image while the ajax is running, Also my code is not supposed to execute further until the ajax's execution is over. If I make async:false I will not be able to load the spinner. If I make async:true I will not be able to wait till ajax execution is over.

Below is how I am calling the function loadBuildList

...
//$loading.show(); // this I will use when aync : false
loadBuildList()
//$loading.hide();
...

How can I handle such situation? Can anybody please help me with this?

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — freedomn-m, Jan 24 '17 at 14:23
See linked - it explains how to restructure/rethink your design. — freedomn-m, Jan 24 '17 at 14:23
If you need to make an original async call synchronous so your code would work, you're coding it wrong. You can either place the code to be executed in the success callback or use Promises (recommended). — emerson.marini, Jan 24 '17 at 14:24
put spinner image inside loadingDiv, $loading.hide() in always callback bcz if any error happened spinner will continue to show, return response from success callback. — Monzurul Shimul, Jan 24 '17 at 14:26
@shi *"return response from success callback"* no. It's too late to "return response". See linked possible duplicate. — freedomn-m, Jan 24 '17 at 14:32

score 1 · Answer 1 · edited May 23 '17 at 10:29

1

You should never use async:false, or you'll stop the whole execution thread until it has got a response.

Everything that needs to be run after an async execution, in this case $.ajax needs to be written inside the callback. That is inside success for JQuery $.ajax.

$loading = $("#loadingDiv")
function loadBuildList() {
    $.ajax({
    async:true,
    url:"ajax_test.php",
    beforeSend : function() { $loading.show(); },
    success : function() { 
      $loading.hide();
      // Stuff after $.ajax goes here.
    },
    fail: function() {
      // Or here.
    }
    });
}

You should also have a read at How do I return the response from an asynchronous call?

edited May 23 '17 at 10:29

Community

1
1

answered Jan 24 '17 at 14:21

zurfyx

31,043
20
111
145

Thanks for answering. I will try this out. – Suraj Sun Jan 24 '17 at 14:34
@SurajSun if you are doing this, you should also read over http://callbackhell.com/ , and try avoid it. – zurfyx Jan 24 '17 at 14:37

score 1 · Answer 2 · edited Jan 24 '17 at 16:01

On the basis of code snippet you have provided it seems there is no need to use beforeSend as you just have one call on the page. You can do it following way.

$loading = $("#loadingDiv");

function loadBuildList() {
    $loading.show(); // Show spinner before AJAX call
    $.ajax({
        async:true,
        url:"ajax_test.php",
        // beforeSend : function() {  },
        success : function() { $loading.hide() }
    });
}

You can still try to make it as mentioned by @zurfyx but usually this practice is followed when you need something centralized and not for individual AJAX calls.

freedomn-m · Answer 3 · 2017-01-24T16:02:43.110

Handling the spinner is fine with .complete (so picks up both success and error):

function loadBuildList() {
    var loading = $("#loadingDiv")
    loading.show();
    $.ajax({
        url:"ajax_test.php",
        complete : function() { loading.hide() }
    });
}

However, this comment is more interesting:

my code is not supposed to execute further

It's not that you don't want to execute further, it's that you want to continue execution when the ajax call has completed.

You can do this by returning the $.ajax object, which is a promise. With the promise, you can then add chain calls in your own code. This is similar to using a callback parameter, but generally more flexible:

function loadBuildList() {
    return $.ajax({
    ...
}

// calling code
loadBuildList().done(function() {
    // code to run when the list has loaded
});

Thanks for reply. I will try this. – Suraj Sun Jan 24 '17 at 14:34 — Suraj Sun, Jan 24 '17 at 14:34

Need assistance in ajax spinner displaying

3 Answers3