JQuery function returns promise but 'when' still doesn't wait

Question

I've just learned about the $.when().then() functionality. I've been trying to make it work and I've looked at a lot of examples but I'm apparently not understanding fully yet because I can't make it work. I know that whatever function I pass as a parameter to the when() function must return a promise object. I feel like what I've done should work but it doesn't so clearly I'm still not understanding something. In my code below, loadUserInterfaceGroupsDropDown() is executing before the ajax call inside initializeUserInterfaceGroups() has completed. Notice that I return the results of the ajax call. That ought to yield the same as many of the simplistic examples that I saw that pass an ajax call as a parameter to the when() statement. Also I return a promise in the else statement at the bottom. But since this doesn't seem to be working I've obviously misunderstood something. Please help.

$.when(initializeUserInterfaceGroups()).then(loadUserInterfaceGroupsDropDown());

function initializeUserInterfaceGroups() {
    if (userInterfaceGroups === undefined) {
        // get the UserInterfaceGroups
        return $.ajax({
            type: "POST",
            url: "Users.aspx/GetUserInterfaceGroups",
            data: "{organizationId: " + $("#ddOrganization").val() + "}",
            datatype: "json",
            contentType: "application/json; charset=utf-8",
            success: function(response) {
                if (response.d.Success) {
                   userInterfaceGroups = response.d.UserInterfaceGroups;
                   //loadUserInterfaceGroupsDropDown();
                    renderCheckboxLists();
                } else {
                   alert(response.d.ErrorMessage);
                }
            },
            failure: function(response) {
               alert('Error getting the UserInterfaceGroups: ' + response.d);
            }
        });
    } else {
        return $.Deferred().promise();
    }
}

`$.Deferred().promise();` returns a promise that is never resolved. I don't think that is what you want. — Bergi, May 17 '17 at 18:45

score 2 · Accepted Answer · answered May 17 '17 at 18:13

2

The proper syntax to use .when() and .then() promise with multiple ajax function is like below:

$.when($.ajax(...), $.ajax(...)).then(function (resp1, resp2) {
    //this callback will be fired once all ajax calls have finished.
});

So basically you need to change your calling method like above. Hope it helps!

answered May 17 '17 at 18:13

Mahesh Singh Chouhan

2,558
1
16
26

Yes, that did it! Thank you. – Dar May 17 '17 at 18:20
+1. On a side-note, just nitpicking, but shouldn't it be `$.when($.ajax(...), $.ajax(...)).then(function (resp1) {...}).catch(resp2) {...})`? Just for chainability. I know the desired semantics are debatable. – Aluan Haddad May 17 '17 at 18:23
Thanks! I believe `.catch()` can be used to catch error ? – Mahesh Singh Chouhan May 17 '17 at 18:25
Correct, I think I am now confused. What does resp2 represent? – Aluan Haddad May 17 '17 at 18:26
Cool! `reps2` will have response from `second ajax` request! – Mahesh Singh Chouhan May 17 '17 at 18:27
1

@MaheshSinghChouhan thanks for explaining! You are 100% correct. I keep forgetting how jQuery's Promise/deferred APIs differ from many others. – Aluan Haddad May 17 '17 at 18:30

score 0 · Answer 2 · answered May 17 '17 at 18:48

this doesn't seem to be working - I've obviously misunderstood something.
$.when(initializeUserInterfaceGroups()).then(loadUserInterfaceGroupsDropDown());

Yes, two things:

You absolutely don't need $.when when you already have a promise. You should only use it when you're not sure whether the return value of the call is a promise, or when you have multiple promises to await. Neither is the case here.
then takes a callback function. You must not call loadUserInterfaceGroupsDropDown() right away (which is why it doesn't wait) and pass the results to then, you must pass the function itself. (Or at least wrap the call in a function expression).

So your code should read

initializeUserInterfaceGroups().then(loadUserInterfaceGroupsDropDown);

score 0 · Answer 3 · answered May 18 '17 at 16:43

I thought I'd update what I've done. I was still learning new things about how to best use this. In the end it was still the perfect answer to what I needed but I did have to change some things around. Somebody pointed out that I am returning an unresolved promise in my else statement in one of my ajax calls. While that seems to be working for me the time being, that is something I'll need to research some more. Here is my working code in the hopes it will help someone. I do this because even after getting the right answer there were still things I had to figure out so hopefully this will help somebody:

$.when(getUserInterfaceGroups(), getUserDetail($(this).attr("data-userId"))).done(function(resp1, resp2) {
    renderUserInterfaceGroupControls(resp1[0], resp2[0]);
    populateForm(resp2[0]);
});

function getUserInterfaceGroups() {
    if (userInterfaceGroups === undefined) {
        return $.ajax({
            type: "POST",
            url: "Users.aspx/GetUserInterfaceGroups",
            data: "{organizationId: " + $("#ddOrganization").val() + "}",
            datatype: "json",
            contentType: "application/json; charset=utf-8",
            failure: function(response) {
                alert('Error getting the UserInterfaceGroups: ' + response.d);
            }
        });
    } else {
        return $.Deferred().promise();
    }
}

function getUserDetail(userId) {
    return $.ajax({
        type: "POST",
        url: "Users.aspx/GetUser",
        data: "{userId: " + userId + "}",
        datatype: "json",
        contentType: "application/json; charset=utf-8",
        failure: function (response) {
            alert('Error getting the User details: ' + response.d);
        }
    });
}

function renderUserInterfaceGroupControls(resp1, resp2) {
    if (resp1.d.Success && resp2.d.Success) {
        userInterfaceGroups = resp1.d.UserInterfaceGroups;
        loadUserInterfaceGroupsDropDown(resp2.d.UserDetail.InterfaceModeId);
        renderCheckboxLists();
    } else {
        alert(response.d.ErrorMessage);
    }
}

function populateForm(response) {
    if (response.d.Success) {
        var userDetails = response.d.UserDetail;
        $("#txtUserCode").val(userDetails.UserCode);
        $("#txtName").val(userDetails.Name);
        $("#txtPassCode").val(userDetails.PassCode);
        $("#ddUserInterfaceGroup option[value='" + userDetails.UserInterfaceGroupId + "']").prop("selected", true);
        $("#txtEmail").val(userDetails.Email);
        $("#dtBirthDate").val(userDetails.DateOfBirth);
        $.each(userDetails.ContactGroupIds, function (idx) {
            $("div input[type=checkbox][value=" + userDetails.ContactGroupIds[idx] + "]").prop('checked', true);
        });
        if (userDetails.AssetTagNumber === "") {
            $("#rbUserOwned").prop("checked", "checked");
        } else {
            $("#txtAssetTag").val(userDetails.AssetTagNumber);
        }
        $("#hidUserId").val(userDetails.Id);
        showInputFields();
    } else {
        alert(response.d.ErrorMessage);
    }
}

JQuery function returns promise but 'when' still doesn't wait

3 Answers3