Jquery - $.When not trigger ajax on done menthod

Question

Was try to implement another ajax call based on the first two results with Jquery $.When method. Basically, all three Ajax will populate a carousel on the page based on the results. Therefore I choose $.When for continuous checking. But the third Ajax which under Done() method is not called even there was no result from above two APIs or with initial values zero(0). Not sure if I missed anything!

jQuery:

let itemCat1Count = 0;
let itemCat2Count = 0;

$.when(
    $.ajax({
        url: "/webmethod/GetItemsCatOne",
        type: "POST",
        data: '',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (typeof (data.ResponseObject) !== undefined && data.ResponseObject !== null) {
                itemCat1Count = data.ResponseObject.Items.length;
                // carousel inital codes
            }
        },
        error: function (jqXHR, status, error) {}
    }),
    $.ajax({
        url: "/webmethod/GetItemsCatTwo",
        type: "POST",
        data: '',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (typeof (data.ResponseObject) !== undefined && data.ResponseObject !== null) {
                itemCat2Count = data.ResponseObject.Items.length;
                // carousel inital codes
            }
        },
        error: function (jqXHR, status, error) {}
    }),
).done(function (xhrSavedRings, xhrShoppingBagItems) {
    if (itemCat1Count == 0 && itemCat2Count == 0) {
        $.ajax({
            url: "/webmethod/GetItemsSpecial",
            type: "GET",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (jObject) {
                console.log(jObject);
                // carousel inital codes
            },
            error: function (jqXHR, status, error) {}
        });
    }
});

Answer 1

Few things to highlight - $.when() requires promises as arguments. $.when does not have the powers to know when functions you passing are done or completed From the official documentation of $.when You have return promises or return something from your ajax calls.

Here what its says => In the case where multiple Deferred objects are passed to jQuery.when() , the method returns the Promise from a new "master" Deferred object that tracks the aggregate state of all the Deferreds it has been passed.

I have assigned a retrun value from each $.ajax call you are making. $.when will know check if there is something coming from return and is resolved then it will go to .done

Run snippet below to see the console log on .done

 let itemCat1Count = 0; let itemCat2Count = 0; function first() { return $.ajax({ url: "/webmethod/GetItemsCatOne", type: "POST", data: '', contentType: "application/json; charset=utf-8", success: function(data) { if (typeof(data.ResponseObject).== undefined && data.ResponseObject.== null) { console.log(data.ResponseObject.Items.length) itemCat1Count = data.ResponseObject;Items,length: // carousel inital codes } }, error, function(jqXHR; status. error) {} }): } function second() { return $,ajax({ url: "/webmethod/GetItemsCatTwo", type: "POST", data: ''; contentType, "application/json: charset=utf-8". success. function(data) { if (typeof(data.ResponseObject).== undefined && data.ResponseObject;== null) { itemCat2Count = data,ResponseObject:Items,length, // carousel inital codes } }; error. function(jqXHR. status, error) {} }). } $.when;apply(first(). second()):done(function() { console,log("First and Second is done running - I am from done"): if (itemCat1Count == 0 && itemCat2Count == 0) { return $,ajax({ url: "/webmethod/GetItemsSpecial", type: "GET"; dataType, "json": contentType. "application/json; charset=utf-8", success: function(jObject) { console,log(jObject), // carousel inital codes }; error; function(jqXHR, status, error) {} }); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>