stateSave saves Responsive Modal?

stateSave saves Responsive Modal?

joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3
edited March 2023 in Free community support

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

  • kthorngrenkthorngren Posts: 20,475Questions: 26Answers: 4,804

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

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

  • kthorngrenkthorngren Posts: 20,475Questions: 26Answers: 4,804
    Answer ✓

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

    Kevin

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3
    edited March 2023

    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?

  • kthorngrenkthorngren Posts: 20,475Questions: 26Answers: 4,804

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

    Kevin

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3
  • kthorngrenkthorngren Posts: 20,475Questions: 26Answers: 4,804

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

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

  • kthorngrenkthorngren Posts: 20,475Questions: 26Answers: 4,804

    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

  • allanallan Posts: 62,099Questions: 1Answers: 10,183 Site admin

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    Thanks Alan, I will test it!

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3
    edited March 2023

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

  • kthorngrenkthorngren Posts: 20,475Questions: 26Answers: 4,804
    edited March 2023

    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

  • kthorngrenkthorngren Posts: 20,475Questions: 26Answers: 4,804

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3
    edited March 2023

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

  • kthorngrenkthorngren Posts: 20,475Questions: 26Answers: 4,804

    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

  • allanallan Posts: 62,099Questions: 1Answers: 10,183 Site admin

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    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!

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    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);
      });
    },
    
  • allanallan Posts: 62,099Questions: 1Answers: 10,183 Site admin

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

    Allan

Sign In or Register to comment.