Update button not firing with extend: 'savedStates'

jfixsen

Hi Allan.

First, thanks for answering my question last Friday, datatables is amazing.

My question has to do with the savedStates. I am using functionality to save a state in the menu which lets the user name the state, then it calls the backend ajax script ss.php to save it to the database. After this happens, it shows in the menu, with an arrow on the right, that then gives 3 options to manipulate that particular saved state (update/rename/remove). My issue is that the "update" button is no longer firing my backend ss.php ajax script. I can see this by inspecting and going to the network tab, and also by monitoring input to the ss.php script. What's weird, is that it was working fine on Friday. Today, the only way to get it to fire is if I save a new state, and then immediately hit "update" without changing any criteria, but if I change anything in the criteria, it will not fire.

Here is a link to test case: https://www.mystockdata.com/dividend-search/

Its a demo app so it will not hurt anything to add/remove saved states.

You can add a "Saved Query" and then go back and try to update it, and the ajax ss.php script never gets called. Any idea what might be going on? The rename and remove buttons work just fine and will always post data to the server. I've also tried from multiple browsers and had a co-worker try from a different location all with the same behavior. Thanks in advance.

-Jason

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

rmd

I can confirm this behaviour with a different setup using Python / Flask on the backend.

The only time I can get a AJAX POST to the server for an 'update' action on a state is immediately after creating.

Once a state is the result of loading from the backed as opposed to on-page creation the update action fails to fire hence upates to the state are lost upon a page reload.

allan

Hi,

I missed this at the time - sorry! @jfixsen Could you possibly update the page to use the non-minified version of DataTables and StateRestore so I can debug what is happening there please?

Or @rmd Perhaps you could link to your page with non-minified code?

I've just tried experimenting a bit and it appears to be working in this example so I'm not sure what is going wrong yet I'm afraid.

Allan

cuspenser

Hi Allan,

I can confirm this behavior on your example. Here are the steps to take:

1. Create a state with a "Search" for "Bert" (you should have 19 entries).
2. Create a state with a "Search" for "War" ( you should have 25 entries).
3. Go back to "Bert" state and sort on Country, then "update" the state.
4. Go back to "War" state, then back to "Bert" state and you should see the state looks correct (e.g., Country is still sorted).
5. Reload the page.
6. Click on the "Bert" state. It should still look good.
7. Sort on Last Name and update the state.
8. Click on "War" state and the go back to "Bert" state. (The update should still be sorted on Last Name).
9. Reload the page.
10. Click on the "Bert" state. It's back to sorting by Country and not Last Name (so it doesn't look like the "update" took)
11. If you look at the Network tab in Dev tools, you'll see no ajax calls exist on states with updates occurring after the page has been reloaded.

I have similar question open with Colin from a few days ago. I suspect all of these issues are related. Perhaps, the issue is the order in which the ajax-loaded data is recognized by the stateRestore function?

Any thoughts? I'm sorry for bringing up similar issues in different threads.

Thanks,

Tanner

bagelsesame

Hi,

I ran into the same issue. It took me a while to figure out what was going on. It seems that stateRestore considers all states loaded with the ajax function as predefined searches. They don't get updated for this reason. See source file starting on line 762.

You can patch it by adding this in your datatable parameters:

stateLoadParams: function (settings, data) {
    dt_object.context[0]._stateRestore.s.states.forEach((state) => state.s.isPreDefined=false);
}

Hope this helps!