stateSave saves Responsive Modal?

joseoliveiraborlas

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:

kthorngren

You can use stateSaveParams to customize what is saved and stateLoadParams 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 for stateSaveParams 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

joseoliveiraborlas

Hi Kevin,
Do you have some example of code? I have no idea how to do this...

kthorngren

I built an example for you:
https://live.datatables.net/fineheto/1/edit

Kevin

joseoliveiraborlas

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?

kthorngren

It should work. Try updating the example to show the modal to see if it works.

Kevin

joseoliveiraborlas

No, don't work: https://live.datatables.net/fineheto/2/edit

kthorngren

It doesn't work because you are getting Javascript errors. Look at the browser's console:

Uncaught ReferenceError: moment is not defined

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

joseoliveiraborlas

I'm sorry, i delete the moment function but not saved!? Is ready now: https://live.datatables.net/fineheto/3/edit

kthorngren

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

allan

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

joseoliveiraborlas

Thanks Alan, I will test it!

joseoliveiraborlas

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') in var children = state.children; line.

(Aside: the 'processing:true' text seems to have disappeared in this new version, only animation appears. Is it supposed @allan ?)

kthorngren

Uncaught TypeError: Cannot read properties of null (reading 'children') in var children = state.children

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:

    var children = [];
    if ( state.children ) {
      children = state.children;
    }

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

kthorngren

Aside: the 'processing:true' text seems to have disappeared in this new version, only animation appears. Is it supposed

Yes. See the Datatables 1.12.0 Release Notes.

Processing indicator updated to use a CSS animation indicating that something is happening

Kevin

joseoliveiraborlas

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.

        Clicking row index: 24
        runner-3.17.11.min.js:1 Clicking row index: 2
        runner-3.17.11.min.js:1 Clicking row index: 18
        runner-3.17.11.min.js:1 Clicking row index: 27
        runner-3.17.11.min.js:1 Clicking row index: 5
        runner-3.17.11.min.js:1 Clicking row index: 22
        runner-3.17.11.min.js:1 Clicking row index: 50
        runner-3.17.11.min.js:1 Clicking row index: 3
        runner-3.17.11.min.js:1 Clicking row index: 12

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

kthorngren

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:

1. Always the last row is clicked even though the correct row is found.
2. Go to a new page and the 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

1. The proper row is clicked.
2. When going to a new page the responsive-display is note fired.

And the FIRST load of the page, the error appears:

Change the if statement to use hasOwnProperty().

Kevin

allan

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

joseoliveiraborlas

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.

"initComplete": function(settings, json) {
    var fichAberta = new URLSearchParams(window.location.search).get('fichAberta');
    if (fichAberta !== null) {
        var node = this.api().row(fichAberta).node();
        if (node) {
            $('td.dtr-control', node).trigger('click');
        }
    }
},

Whit double click saving:

$("#tbbl tbody").on("dblclick", "tr", function () { 
    var url = new URL(window.location.href); url.searchParams.set("fichAberta", table.row(this).index());window.history.replaceState({}, "", url);
    table.row(this).node().querySelector(\'.dtr-control\').click();
}); 

I'll be waiting for news!

joseoliveiraborlas

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.

"initComplete": function (settings, json) {
  var fichAberta = new URLSearchParams(window.location.search).get('fichAberta');
  if (fichAberta !== null) {
    var node = this.api().row(fichAberta).node();
    if (node) {
      $('td.dtr-control', node).trigger('click');
    }
  }

  $(document).on('show.bs.modal', '.dtr-bs-modal', function () {
    var url = new URL(window.location.href);
    url.searchParams.set("fichAberta", table.row({selected: true}).index());
    window.history.replaceState({}, "", url);
  });

  $(document).on('hide.bs.modal', '.dtr-bs-modal', function () {
    var url = new URL(window.location.href);
    url.searchParams.delete("fichAberta");
    window.history.replaceState({}, "", url);
  });
},

allan

Fix for responsive-display firing too often committed here and will be in the nightly shortly.

Allan