Wait for Ajax call to finish

Question

I have a situation where in I m doing a number of AJAX calls using jquery and in turn returning JSON data from those calls into some variables on my page. The issue is that the Ajax call takes a little time to get processed and in the mean time my control shifts to next statement where I intend to use the output of AJAX call. Since the call takes time to return the data I am left with empty object that fails my function. is there any way where I can wait for the finish of AJAX call to happen and proceed only when the result is returned from the call???

so this is my code where in I am trying to return transactionsAtError to some other jquery file where the control shifts to next statement before this call gets executed

this.GetTransactionAtErrors = function (callback) {
        var transactionsAtError;
        $.ajax({
            url: ('/Management/GetTransactionsAtError'),
            type: 'POST',
            cache: false,
            success: function (result) {
                if (result && callback) {
                    transactionsAtError = (typeof (result) == "object") ? result : $.parseJSON(result);
                }
            }
        });
        return transactionsAtError;
    }

Frequent duplicate. Would [this one](http://stackoverflow.com/questions/12475269/variable-doesnt-get-returned-jquery) do ? — Denys Séguret, Nov 06 '12 at 12:33
As this is a frequent question, just be aware that the answers telling to use async:false were never good and are now completely obsolete. — Denys Séguret, Nov 06 '12 at 12:34

Rodik · Accepted Answer · 2012-11-06T12:50:47.443

2

Assuming you are using jQuery's $.getJSON() function, you can provide a callback function which will be executed once the data is returned from the server.

example:

$.getJSON("http://example.com/get_json/url", function(data){
    console.log("the json data is:",data);
});

EDIT:

After seeing the code you added i can see what's your problem.

Your return transactionsAtError; line runs independently of the ajax call, i.e it will run before the ajax is complete.

you should just call your callback inside your success: function.

example:

this.GetTransactionAtErrors = function (callback) {
    $.ajax({
        url: ('/Management/GetTransactionsAtError'),
        type: 'POST',
        cache: false,
        success: function (result) {
            if (result && callback) {
                var transactionsAtError = (typeof (result) == "object") ? result : $.parseJSON(result);
                callback(transactionsAtError);
            }
        }
    });
}

edited Nov 06 '12 at 12:50

answered Nov 06 '12 at 12:34

Rodik

4,054
26
49

can you be a bit more specific as on where to put the callback thing? I m kinda learning jquery and not an expert – Gautam Nov 06 '12 at 12:39
This is pretty much as specific as i can get without seeing your full code. you need to use one of jQuery's ajax functions ($.ajax(), $.post(), $.getJSON()). the last parameter, of the type function, which is passed to all these functions is your callback function. see http://api.jquery.com/jQuery.getJSON/ – Rodik Nov 06 '12 at 12:42
edited answer, in this case, you just fire your callback function once the request is served. – Rodik Nov 06 '12 at 12:52

score 0 · Answer 2 · answered Sep 04 '15 at 07:59

When you have your result in scope you can check wait for ongoin ajax calls to finish by using es6 promise:

function ajaxwait()
{
    return(new Promise(function(resolve, reject) {        
    var i = setInterval(function() { 
        if(jQuery.active == 0) {
            resolve();
            clearInterval(i);
        }
    }, 100);        
    }));    
}

You can use this like.

ajaxwait().then(function(){ /* Code gets executed if there are no more ajax calls in progress */ });

Use an es6 shim like this https://github.com/jakearchibald/es6-promise to make it work in older browsers.

Wait for Ajax call to finish

2 Answers2