I'm using a modal dialogue to display list data formatted by DataTables. Within the table are links to another modal dialog to edit items in the first modal dialog's table. I'm turning on the save state feature to maintain sorting, etc., when the second modal dialogue is closed and the first one is refreshed, however the scope of the save state is linked to the parent window. This causes display issues when the user opens further modal dialogs, and I'd like to clear the save state on close of the initial modal dialog.

The dialog I'm using is:

SP.UI.ModalDialog.OpenPopUpPage(url, callback, width, height)

I've tried binding to "onbeforeunload" and "beforeunload" but the events don't seem to fire when the modal is closed, or perhaps I'm using them incorrectly. Example below:

    $(window).bind("beforeunload", function(e){

The callback function from OpenPopUpPage does fire, but I'd need to pass it a reference to the DataTable object to clear the save state via the table's API.

To my understanding I have essentially three options here:

  1. Fix the way I'm catching the modal dialog's unload
  2. Pass a reference of the table object to the callback function
  3. Manually clear the local storage variable DataTables uses for the search bar in the callback.

Thanks in advance for any assistance.

2 Answers 2


You can access your callback method from modal page. Add callback to your parent page to catch the close event

function CloseDialogCallback(dialogResult, returnValue) {
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.RefreshPage', SP.UI.DialogResult.OK);
    // Add your code to clear the save state.

And call CloseDialogCallback method from your modal page when closing. window.parent.CloseDialogCallback()

  • I do have a callback that fires on close for the modal dialog, but the DataTables object, required to reset the save state via the API, is out of scope for this function. Maybe I'm not fully understanding, but how would I pass this object to the callback?
    – Joe
    Commented Jul 24, 2014 at 21:40

Please, try to change your approach, using other modal dialog object that guarantees the close option; for example, the SP.UI.ModalDialog.showModalDialog contains more parameters to configure your Dialog, include the showClose parameter, that meets your requirements:

var options = {  
    url: '<add url to be loaded by the dialog>',  
    title: ‘ModalDialog’,  
    allowMaximize: false,  
    showClose: true,
    width: 800,  
    height: 330,  
    dialogReturnValueCallback: Function.createDelegate(null,function(result,returnValue){  
        if (result == SP.UI.DialogResult.OK) {  
            if (returnValue == null) {  
                SP.UI.Notify.addNotification('Operation successful');  
            } else {  
                location.href = returnValue;  
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', dialogOptions);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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