Callback function seems to be firing before parent function completes

Question

I've been teaching myself JS and cannot get this script to work. It is on a SharePoint site, if that matters. According to what I've learned here: https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced and here: How to use a return value in another function in Javascript?, it seems like it should. I want to trigger updateListItem() after getUserInfo() has completely finished.

function getUserInfo(callbackUI, par1, par2, par3, par4, par5, par6) {
    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
    var users = peoplePicker.GetAllUserInfo();
    var context = new SP.ClientContext.get_current();
    this.user = context.get_web().ensureUser(users[0].Key);
    context.load(this.user);
    context.executeQueryAsync(
         Function.createDelegate(null, ensureUserSuccess), 
         Function.createDelegate(null, onFail)
    );
    callbackUI(par1, par2, par3, par4, par5, par6);  
}

function ensureUserSuccess() {
    var testone = (this.user.get_id());
    $('#userId').html(this.user.get_id());
    console.log(testone);
    return this.user.get_id();
}

function onFail(sender, args) {
    alert('Query failed. Error: ' + args.get_message());
}

The click event below works, but it's not recognizing the value of 'usersID' (set in ensureUserSuccess()), even though the value is correct in my HTML.

$("body").on("click",".savePartner",function(){
    var thisID  = $(this).closest(".singleItemWrap").find(".bigID").text();
    var usersID = $(this).closest(".singleItemWrap").find("#userId").val();

    var itemProperties = {'ITContactId': usersID};
    getUserInfo(updateListItem,_spPageContextInfo.webAbsoluteUrl,'GFSTechIntake',thisID,itemProperties,printInfo,logError);


    //updateListItem(_spPageContextInfo.webAbsoluteUrl,'GFSTechIntake',thisID,itemProperties,printInfo,logError);
    function printInfo()
    {
        console.log('PARTNER UPDATED!');
      //  alert("This item has been assigned!");
    }
    function logError(error){
        alert("An error occurred. Please refresh and try again.");
        console.log(JSON.stringify(error));
    }

});

I've spent hours trying different things I find online but can't seem to get this. Any help would be much appreciated!

score 0 · Answer 1 · answered Aug 16 '18 at 20:52

You can't use an asynchronous function next to another and expect the first one to wait for the other, in this case that's executeQueryAsync() and callbackUI(), put the one you want executed last the callback of the first:

function getUserInfo(callbackUI, par1, par2, par3, par4, par5, par6) {
    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;
    var users = peoplePicker.GetAllUserInfo();
    var context = new SP.ClientContext.get_current();
    this.user = context.get_web().ensureUser(users[0].Key);
    context.load(this.user);
    context.executeQueryAsync(
         () => {
             Function.createDelegate(null, ensureUserSuccess);
             callbackUI(par1, par2, par3, par4, par5, par6);
         }, 
         Function.createDelegate(null, onFail)
    );

}

Thanks for your reply. I plugged in your code and attempted to console log my '$("#userId").val()' in my updateListItem function, since it should be set by the time this is called, but it is still coming up blank. Any ideas on where I may be going wrong? — loady toad, Aug 16 '18 at 21:25

Callback function seems to be firing before parent function completes

1 Answers1