Multiple Simultaneous Ajax Requests (with one callback) in jQuery

Question

I'm trying to get a page to load faster by splitting all the database calls into separate scripts and running them at the same time with ajax. I did some research and found jQuery has a $.when().then() function that can take care of this. I am OK with the basics of ajax but the deferred/promise concept has me a little confused. I have tried the below code but it will only load the data from the first ajax result. Commenting out the first one will load the next one but only one will show on the page. Appreciate any help with this. Thanks.

 $.when(  $.post('extensions/ext_adjustments_investigation/general_details.php', {sku: sku},function(data) { result = data; }),  
                $.post('extensions/ext_adjustments_investigation/location_information.php', {sku: sku},function(data1) { result1 = data1; }),
                $.post('extensions/ext_adjustments_investigation/annotations.php', {sku: sku},function(data2) { result2 = data2; }),
                $.post('extensions/ext_adjustments_investigation/adjustment_history.php', {sku: sku},function(data3) { result3 = data3; })

    ).then( 
    function() {
        $("#searching").addClass("hidden");
        $("#load").prop("disabled",false);  
                $("#general").html(result).hide().slideDown()("slow");
                $("#location").html(result1).hide().slideDown()("slow");
                $("#anno").html(result2).hide().slideDown()("slow");
                $("#history").html(result3).hide().slideDown()("slow");
                }
    );

Look at this similar question http://stackoverflow.com/questions/287188/how-to-know-when-all-ajax-calls-are-complete — Bolza, Apr 01 '16 at 11:04

score 1 · Answer 1 · answered Apr 01 '16 at 10:32

Maybe you need to get the data from the one callback

$.when(
    $.post('extensions/ext_adjustments_investigation/general_details.php', {sku: sku}),
    $.post('extensions/ext_adjustments_investigation/location_information.php', {sku: sku}),
    $.post('extensions/ext_adjustments_investigation/annotations.php', {sku: sku}),
    $.post('extensions/ext_adjustments_investigation/adjustment_history.php', {sku: sku})
).then(
    function (general, location, annotations, history) {
        $("#searching").addClass("hidden");
        $("#load").prop("disabled", false);
        $("#general").html(general).hide().slideDown()("slow");
        $("#location").html(location).hide().slideDown()("slow");
        $("#anno").html(annotations).hide().slideDown()("slow");
        $("#history").html(history).hide().slideDown()("slow");
    }
);

Hi Azder, I have tried your approach but it still only displays the data from the general ajax call, except now it has the word success and the end. Can you think why only the first call back is being passed to the .then() function? — redd42, Apr 01 '16 at 11:15
@redd42 from https://api.jquery.com/jquery.when/ the one before the last example uses `$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {`, so maybe `.done` instead of `.then`. other than that, without checking the actual code, I can't think of why it fails. — Azder, Apr 01 '16 at 11:19

score 1 · Answer 2 · answered Apr 02 '16 at 13:20

This can be mechanised as follows :

var baseURL = 'extensions/ext_adjustments_investigation/';
var data = [
    {script: 'general_details.php', selector: "#general"},
    {script: 'location_information.php', selector: "#location"},
    {script: 'annotations.php', selector: "#anno"},
    {script: 'adjustment_history.php', selector: "#history"}
];
var promises = data.map(function(item) {
    return $.post(baseURL + item.script, {sku: sku}).then(function(data, textStatus, jqXHR) {
        return data;
    }, function(error) {
        console.log(error);
        return $.when('error');//error recovery
    });
});
$.when.apply(null, promises).then(function() {
    $('#searching').addClass('hidden');
    $('#load').prop('disabled', false);
    for(var i=0; i<arguments.length; i++) {
        $(data[i].selector).html(arguments[i]).hide().slideDown()('slow');
    }
});

joyBlanks · Answer 3 · 2016-04-26T21:04:26.320

0

$.when(calla(), callb()).then(
    function(result1, result2){
        //do something with the results
    }
    ,
    function(error){
        console.log('error'+error);
    }
);

You keep on adding arguments in the success and error functions to make it work. Hope it helps

edited Apr 26 '16 at 21:04

answered Apr 01 '16 at 10:29

joyBlanks

6,419
1
22
47

Unfortunately, the results from multiple jQuery Ajax calls via `$.when()` are not as simple as this portrays (each argument is an array of values) and there is never more than one error argument. – jfriend00 Apr 01 '16 at 16:26

Multiple Simultaneous Ajax Requests (with one callback) in jQuery

3 Answers3