stateSave saves Responsive Modal?
stateSave saves Responsive Modal?
Is it possible to use stateSave for save the state of a modal from Responsive plugin ?
For example: after clicking on the "dtr-control" icon to open the model for that line, if you go back to the page it will open again automatically?
I've already written some code that might be able to work together, but I've analyzed the information that stateSave stores in the browser's storage and there is no information from that plugin:
This question has an accepted answers - jump to answer
Answers
You can use
stateSaveParams
to customize what is saved andstateLoadParams
to take the customized saved data and handle the state restoration.Use the
responsive-display
event to keep track of the rows that are displaying the responsive details. Maybe store it in a global variable forstateSaveParams
to use to save the rows.To open the row in
stateLoadParams
you might be able to use jQuery trigger() on the responsive icon.Kevin
Hi Kevin,
Do you have some example of code? I have no idea how to do this...
I built an example for you:
https://live.datatables.net/fineheto/1/edit
Kevin
Hi Kevin,
Thank you very much! Looks like its gonna work. But i need for the modal, not for the 'children row'. It's possible?
It should work. Try updating the example to show the modal to see if it works.
Kevin
No, don't work: https://live.datatables.net/fineheto/2/edit
It doesn't work because you are getting Javascript errors. Look at the browser's console:
Plus you will need to add Bootstrap and update the Datatables libraries to include the Bootstrap styling libraries. Easiest way is to use the Download Builder.
Kevin
I'm sorry, i delete the moment function but not saved!? Is ready now: https://live.datatables.net/fineheto/3/edit
Interesting. Seems like there is a bug. According to the
responsive-display
docs the event should fire whether showing child rows or a modal. It doesn't fire when showing the modal. This is something @allan will need to look at.Kevin
Thanks for all the investigation here. I've committed a fix for this issue with
responsive-display
not being triggered when the modal display type is used.The nightly will be updated with the change in the next 10 minutes.
Regards,
Allan
Thanks Alan, I will test it!
I couldn't make it work: https://live.datatables.net/fineheto/6/edit
Sometimes it gives console error about 'Children' not defined, but it seems random to me...
Uncaught TypeError: Cannot read properties of null (reading 'children')
invar children = state.children;
line.(Aside: the 'processing:true' text seems to have disappeared in this new version, only animation appears. Is it supposed @allan ?)
The first time stateSave restores the data there won't be a
data.children
object. So you need to check to make sure its there before assigning. Something like this:The test case doesn't work because you need to use the nightly version of responsive that Allan linked to. That will roll into the next the next release when its built.
I updated the example to show both changes.
https://live.datatables.net/qalebole/1/edit
Kevin
Yes. See the Datatables 1.12.0 Release Notes.
Kevin
Hi Kevin,
Does this "test case" work for you? On this side, simply open all possible modals on top of each other. But it's not always.
And when it works, apparently it won't open the one that was saved, but always the same one. I thought it was because I was using JS Bin, I tried to replicate it on my test page and the resposive event simply doesn't trigger: https://bit.ly/42uQ71Z
And the FIRST load of the page, the error appears:
Uncaught TypeError: Cannot read properties of null (reading 'children')
The example was originally written with responsive child rows where multiple rows can be open. The example uses an array of indexes for the opened rows. First thing to do is to remove the array and just keep track of the single row. I made those changes here:
https://live.datatables.net/luxuxoce/1/edit
However, as you say, there is some strange behavior:
responsive-display
is fired for each row. This shouldn't happen.@allan will need to look at this.
Using standard responsive child rows with the same example works as expected:
https://live.datatables.net/lufebuno/1/edit
responsive-display
is note fired.Change the if statement to use hasOwnProperty().
Kevin
Looks like my "fix" for
responsive-display
was a bit too eager. I'll try to look into it tomorrow, but it might slip to next week.Allan
Thank you! For now I've created a new functionality to fill in the lack of the original... which basically does the same, via url.
Whit double click saving:
I'll be waiting for news!
An improved and more functional version! Now it only registers the open information if the modal is actually displayed, and deletes the information if it is closed.
Fix for
responsive-display
firing too often committed here and will be in the nightly shortly.Allan