Wait until three ajax calls have resolved to fire function (defer?)

Question

I need to wait until three ajax calls have completed until another function should begin. I've tried using the jquery deferred promise https://api.jquery.com/deferred.promise/ but my jobs are returned before the deferred data is loaded. I need to force these three ajax calls to complete before firing the function. I'm not tied down to using deferred, that just seemed like the logical way to go.

I am using datatables and need the ajax calls to complete before data is loaded into them.

"ajax":{
        "url": API_ROOT + "jobs?available=true&max_results=500",
        "dataSrc": function(data){
            function all_loaded(){
                var dfd = $.Deferred();
                var mats_loaded, fins_loaded, pros_loaded;
                setTimeout(function(){
                $.ajax({
                    url: API_ROOT + "finishes?max_results=500",
                    dataType: 'json',
                    error: function(){
                        console.log("Error getting finishes");
                    },
                    success: function(data){ 
                        finishes = data._items;
                        fins_loaded = true;
                        check_all_loaded();
                    }
                });
                },2000);
​
                $.ajax({
                    url: API_ROOT + "processes?max_results=500",
                    dataType: 'json',
                    error: function(){
                        console.error("Error getting processes");
                    },
                    success: function(data){ 
                        processes = data._items;
                        pros_loaded = true;
                        check_all_loaded();
                    }
                });
​
                $.ajax({
                    url: API_ROOT + "materials?max_results=500",
                    dataType: 'json',
                    error: function(){
                        console.log("Error getting materials");
                    },
                    success: function(data){ 
                        materials = data._items;
                        mats_loaded = true;
                        check_all_loaded();
                    }
                });
​
                check_all_loaded = function(){
                    if (mats_loaded && fins_loaded && pros_loaded){
                        dfd.resolve("Loaded");
                    }
                }
​
                return dfd.promise();
            }
​
            $.when( all_loaded()).then(function(){
                var jobs = data._items;
                //a bunch of other stuff
                return jobs;
            });
        }
    }

The .when eventually fires, that's not the problem, the problem is that the .when is returning nothing for the data because the Ajax calls haven't been completed. Essentially, we need the .when to stop executing all js until the promise has been resolved.

Sorry for the long code, I just want to be complete and wanted to note that I have three separate Ajax calls. Thanks for your thoughts.

Answer 1

You can use $.when and pass all the ajax calls that you need to wait.

Example:

var ajax1 = $.ajax(..)
var ajax2 = $.ajax(..)
var ajax3 = $.ajax(..)
$.when(ajax1, ajax2, ajax3).then(function(){
 oncomplete code here...
});

Answer 2

You need to initialize your datatable using JavaScript-sourced data (see data option) AFTER your Ajax calls are complete instead of using Ajax-sourced data directly with ajax option.

For example:

var ajax1 = $.ajax( /*...*/ );
var ajax2 = $.ajax( /*...*/ );
var ajax3 = $.ajax( /*...*/ );

// When all Ajax requests were successful
$.when(ajax1, ajax2, ajax3).done(function(a1, a2, a3){
   // a1, a2 and a3 are arguments resolved 
   // for the ajax1, ajax2 and ajax3 Ajax requests, respectively.

   // Each argument is an array with the following structure:
   // [ data, statusText, jqXHR ]

   // Merge data from three Ajax calls
   var data = a1[0]._items.concat(a2[0]._items, a3[0]._items);

   // IMPORTANT:
   // Initialize data table once all Ajax requests are successful
   $('#example').DataTable({ 
     data: data,
     // ... other options ...
   });
});