Modal Dialogue Behavior On Close

Question

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){
         oTable.api().state.clear();
         console.log("CLOSING.");
    });

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.

Answer 1

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()

Answer 2

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');  
                SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);  
            } else {  
                location.href = returnValue;  
            }  
        }  
    })  
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', dialogOptions);