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:
- Fix the way I'm catching the modal dialog's unload
- Pass a reference of the table object to the callback function
- Manually clear the local storage variable DataTables uses for the search bar in the callback.
Thanks in advance for any assistance.