Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

when multiple ajax calls done

Following is the scenario which doesn't work in the order I want:

var masterData = {};
var tableNames = ['table1','table2','table3','table4','table5','table6'];
var pullSqlData = function(){
  tableNames.forEach(function(value) {
    if(storage.isEmpty(value)) {
      $.getJSON('http://domain.com?r=appsync/read&id='+value+ "&callback=", function(data){
        masterData[value] = data;
        storage.set(value,data);
      });
    } else {
      masterData[value] = storage.get(value);
    }
  });
};

$.when(pullSqlData()).done(function(){
console.log('all done');
});

After searching around I know I can get above to work if I manually do something like

$.when(
$.getJSON('http://domain.com?r=appsync/read&id=table1&callback=', function(data){
        masterData[value] = data;
        storage.set(value,data);
      }),
$.getJSON('http://domain.com?r=appsync/read&id=table2&callback=', function(data){
        masterData[value] = data;
        storage.set(value,data);
      }),
//more calls
).done(function(){
console.log('all done');
});

However I was wondering if there is a way of doing above the proper way

*storage is a HTML5 localStorage jQuery plugin

like image 755
Nick Germi Avatar asked Dec 06 '13 04:12

Nick Germi


People also ask

How do I know when AJAX calls are complete?

The ajaxStop() method specifies a function to run when ALL AJAX requests have completed. When an AJAX request completes, jQuery checks if there are any more AJAX requests. The function specified with the ajaxStop() method will run if no other requests are pending.

How do I stop multiple AJAX calls from repeated clicks?

}); If isLoading is false, the AJAX call starts, and we immediately change its value to true. Once the AJAX response is received, we turn the value of that variable back to false, so that we can stop ignoring new clicks.

What happens when one AJAX call is still running and you send an another AJAX call before the data of first AJAX call comes back?

Since Ajax calls are asynchronous, the application will not 'pause' until an ajax call is complete, and simply start the next call immediately. JQuery offers a handler that is called when the call is successful, and another one if an error occurs during the call.

Can we execute run multiple AJAX requests simultaneously in jQuery?

There is a requirement to make multiple AJAX calls parallelly to fetch the required data and each successive call depends on the data fetched in its prior call. Since AJAX is asynchronous, one cannot control the order of the calls to be executed.


1 Answers

Since you are a dynamic number of requests, try

var masterData = {};
var tableNames = ['table1', 'table2', 'table3', 'table4', 'table5', 'table6'];
var pullSqlData = function () {
    var requests = [];
    tableNames.forEach(function (value) {
        if (storage.isEmpty(value)) {
            var xhr = $.getJSON('http://domain.com?r=appsync/read&id=' + value + "&callback=", function (data) {
                masterData[value] = data;
                storage.set(value, data);
            });
            requests.push(xhr)
        } else {
            masterData[value] = storage.get(value);
        }
    });
    return requests;
};

$.when.apply($, pullSqlData()).done(function () {
    console.log('all done');
});

You need to pass all the ajax requests to $.when() so pullSqlData has to return the list of ajax requests created by it. Also $.when() does not take an array as an arguments so you need to use Function.apply() to pass the variable number of parameters to it

like image 74
Arun P Johny Avatar answered Oct 04 '22 20:10

Arun P Johny