ECMAScript Callback method executed after PreSaveAction method

Question

My requirement is to get value from another list and set it to SharePoint list form and then save the item.

I wrote ECMAScript and PreSaveAction(). However, PreSaveAction() return true is executed before ECMAScript call back method, which is why my field value is not saved when I click Save button. Please note that my call back function has no error and I get correct value in alert. I don't know where I am doing wrong. Below is my code for you reference.

function PreSaveAction() 
    { 
        ExecuteOrDelayUntilScriptLoaded(GetTotalAmtAlloted, "sp.js");
        return true;**//This line will execute before my callback function onListItemsLoadSuccess or onQueryFailed execute. Because of this, my field value not able to save it.**

    }


 function GetTotalAmtAlloted()
    {
        var clientContext = null;
        var web = null;
        var vID;

        clientContext = new SP.ClientContext.get_current();
        web = clientContext.get_web();
        var list = web.get_lists().getByTitle("Investment");
        var camlQuery = new SP.CamlQuery();

        var q = "<View><Query><Where><Eq><FieldRef Name='InvestmentSubject' /><Value Type='Text'>abc</Value></Eq></Where></Query></View>";

        camlQuery.set_viewXml(q);

        listItems = list.getItems(camlQuery);

        clientContext.load(listItems);
        clientContext.executeQueryAsync(onListItemsLoadSuccess,onQueryFailed);//After this line "return true" in PreSaveAction() will execute and then CallBackMethods will run.

}

function onListItemsLoadSuccess(sender, args) 
{
  $("input[Title='Total Amount']").val("1000");

}

 function onQueryFailed(sender,args)
 {
  alert("error");
 }

Answer 1

You are performing an asynchronous function call but expect it to act synchronous. Instead, you have to wait for your asynchronous function to finish before your PreSaveAction can return true .

Since you're using jQuery, this can easily be achieved using the deferred/promise that jQuery provides.

function PreSaveAction() { 
    //Get the promise from the function
    var promise = GetTotalAmtAlloted();

    //This is run when the promise is resolved
    promise.done(function(){
        return true;
    });

    //This is run when the promise is rejected
    promise.fail(funtion(){

    });
}


function GetTotalAmtAlloted() {
    var d = $.Deferred();

    var clientContext = null;
    var web = null;
    var vID;

    clientContext = new SP.ClientContext.get_current();
    web = clientContext.get_web();
    var list = web.get_lists().getByTitle("Investment");
    var camlQuery = new SP.CamlQuery();

    var q = "<View><Query><Where><Eq><FieldRef Name='InvestmentSubject' /><Value Type='Text'>abc</Value></Eq></Where></Query></View>";

    camlQuery.set_viewXml(q);

    listItems = list.getItems(camlQuery);

    //An object to pass to the success and failure handlers
    var data = {d: d, list: listItems}
    clientContext.load(listItems);

    //Execute the query and pass the data with our deferred object
    clientContext.executeQueryAsync(Function.createDelegate(data, onListItemsLoadSuccess), Function.createDelegate(data, onQueryFailed));//After this line "return true" in PreSaveAction() will execute and then CallBackMethods will run.

    //Return a promise that can either resolve or reject depending on if the async function is a success or failure
    return d.promise();    
}

function onListItemsLoadSuccess() {
    //Access the listItems
    var listItems = this.list;

    //Do something with the list items

    //On success, resolve the promise
    this.d.resolve();
}

function onQueryFailed() {
    //On failure, reject the promise
    this.d.reject("Something went wrong!");
    alert("error");
}