Making Presaveaction() wait for SP.UI.ModalDialog response

Question

I am using the Presaveaction() to perform pre-new/edit form validation. Once all fields have been validated successfully I would like to offer my users the ability to 'Save and Exit' or 'Save and Continue'.

I am presenting this option to them using the SP.UI.ModalDialog.showModalDialog() method as I would like a better UX than using a native js 'prompt' function (as used here: How to include a 'yes' and 'no' button on the PreSaveAction() on the EditForm.aspx to return true/false accordingly?).

My validation works fine, as does the display of my modal dialog, but the presaveaction() function is completing (and creating/saving the list item) before I have a chance to press either button.

How can I make the presaveaction() function wait for my dialog response?

My code snippet is shown below:

if ($inBranchEventOK === false || $injOccOK === false){  //checks field values
    return false //returns false to prevent save
} else {
    displayCompleteRequest() //calls confirmation modal popup
//other stuff here
    return true
};//end if

function displayCompleteRequest(){

//function openDialog()
    var $confmsgtext = "<p>You have entered all the information required for this stage.</p><p>Do you with to progress to the STAGE NAME stage?</p><p> Click 'Continue' to progress to the STAGE NAME stage or 'Save and Close' if you intend to update this information further</p><button type ='button' onclick='updateStatus()'>Continue</button><button type ='button' onclick='closeDialog()'>Save and Close</button>"; //formats dialog content
    $("#compreqcontent").append($confmsgtext); // appends to DOM

    var dialogTitle = "Do you wish to complete this stage?";
    var options = SP.UI.$create_DialogOptions();
    options.title = dialogTitle;
    options.width = 1000;
    options.showClose = false;
    //options.height = 250;
    //options.autosize = true;
    options.html = createDialogElement();
    options.dialogReturnValueCallback = closeDialog;

    SP.UI.ModalDialog.showModalDialog(options);


function createDialogElement() { //displays dialog
    var dialogElement = $($('#compreqdiv').html());
    return dialogElement.get(0);
}

function closeDialog(){
    $("#compreqcontent").empty();
    //return true
}//end closeDialog

}

function updateStatus(){ //sets status field value based on required conditions.  
var $injOccText = $("[fgid='fg_injOcc']").val();

if ($injOccText !== 'Yes'){
    $('input[title="IncidentStatus"]').text(2);
} else {
    $('input[title="IncidentStatus"]').text(6);
};
closeDialog()

}

What I would like is for the updateStatus function to complete and the modal dialog close before the presaveaction function completes.

Answer 1

I think that there is no way to make the PreSaveAction function wait for a result from the Dialog. The only thing that you can do is to manually trigger the form postback, like this:

if ($inBranchEventOK === false || $injOccOK === false){  //checks field values
return false; //returns false to prevent save
} else {
    displayCompleteRequest() //calls confirmation modal popup
    //always return false from your PreSaveAction function
    return false;
};

function closeDialog(){
    $("#compreqcontent").empty();
    triggerPostback();
}

function triggerPostback(){
    var saveButtonName = $('input[name$="SaveItem"]').attr('name');
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(saveButtonName, "", true, "", "", false, true));  
}