Wait until three ajax calls have resolved to fire function (defer?)
<p>I need to wait until three ajax calls have completed until another function should begin. I've tried using the jquery deferred promise <a href="https://api.jquery.com/deferred.promise/" rel="nofollow">https://api.jquery.com/deferred.promise/</a> 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. </p>

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

<pre><code>"ajax":{
        "url": API_ROOT + "jobs?available=true&amp;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 &amp;&amp; fins_loaded &amp;&amp; pros_loaded){
                        dfd.resolve("Loaded");
                    }
                }
​
                return dfd.promise();
            }
​
            $.when( all_loaded()).then(function(){
                var jobs = data._items;
                //a bunch of other stuff
                return jobs;
            });
        }
    }
</code></pre>

<p>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.</p>

<p>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. </p>