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.

up vote 4 down vote accepted

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));  
}
  • 1
    Got this working as required, but only after an hour or two of head-scratching due to the incompatibility of using FF and "use strict" mode globally with this approach. – Fairfield Jan 13 '14 at 23:22

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.