Close modal dialog WITHOUT refreshing the parent

Question

I need to close my custom form (which I show in modal dialog) and stop the parent site from refreshing.

I call my closing function from custom "Cancel" button on click.

customClose() { 
    //some code here
    window.frameElement.cancelPopUp();
}

<input type="button" value="Cancel" onclick="javascript:customClose()" />

But if I close my dialog this way, it refreshes the parent site. How can I close it without refreshing?

P.S. It's a SharePoint modal dialog.

NOTE: I can't use jQuery for this, need pure js.

Thriggle Thriggle · Accepted Answer · 2016-04-22T16:38:53

SharePoint has some built-in methods for displaying and closing modal dialogs.

For SharePoint 2010, use the SP.UI.ModalDialog.commonModalDialogClose method to close the most recently opened modal dialog.

Here's an example that uses commonModalDialogClose to close a dialog. The window should not refresh upon closing.

ExecuteOrDelayUntilScriptLoaded(showDialog,"sp.js");
function showDialog(){
    var dialogBody = document.createElement("div");
    var btnClose = document.createElement("button");
    btnClose.value = "Cancel";
    btnClose.innerHTML = "Cancel";
    btnClose.onclick = function(){SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,null);};
    dialogBody.appendChild(btnClose);
    SP.UI.ModalDialog.showModalDialog(
        {
            html:dialogBody,
            title:"Your Title Here",
            dialogReturnValueCallback:onClose
        }); 
}
function onClose(result,data){
    // this callback function lets you control what happens after the dialog closes
    switch(result){
        case SP.UI.DialogResult.invalid: 
            break;
        case SP.UI.DialogResult.cancel: 
            break;
        case SP.UI.DialogResult.OK: 
            window.location.reload();
            break;
    }
}

Close modal dialog WITHOUT refreshing the parent

1 Answers