How to compare the current state to a new state and warn that it already exists?
How to compare the current state to a new state and warn that it already exists?
glimpsed_chaos
Posts: 140Questions: 30Answers: 4
Link to test case: https://live.datatables.net/cuxosuta/4/edit
Description of problem: Is there a way to alert/notify/modal a user that they created a duplicate State, when using StateRestore extension?
In the above test case, if you select a state then click "Create State", it creates the exact same state previously selected. This is shown as both States showing checkmarks next to them in the drop down.
This does not convey that or any other meaning to the user to let them know they should either remove the extra State or change its meaning (order, search, etc.).
I tried in the test case, using the "stateRestore-change" event to extract and compare the Key/Value that is saved in the local storage and compare them for duplicates values. However, it seems that the keys won't match even though they do the same thing.
Is there a way to achieve this that I can implement? It seems like there should be as the indication of the checkmark on both States implies that the extension is aware of the duplicate nature.
I would like to be able to, modal preferable, notify the user they created duplicate state and should modify/delete.
Thanks for your time and any help you can offer.
This question has accepted answers - jump to:
Answers
Looks like StateRestore has a _deepCompare() function that is used to compare two states. You might be able to reuse that code on your page.
One option might be to use
stateRestore.states()to fetch all the states and compare them directly by converting the objects to a JSON string. I created this example to show this:https://live.datatables.net/nahotobe/1/edit
It accesses the state using
table.stateRestore.states()[1].s.savedStatethen usesJSON.stringify()to convert to JSON. As long as the order of the object is thesavedStatesame this should work. Not sure if the order is guaranteed in Javascript. A deep compare function of thestateRestore.states()result would be a safer option.Kevin
It looks like comparing the stateRestore.states should work.
Though it appears that if you have additional options/extensions enabled, such as childRows or searchPanes, the stateRestore.states object will contain settings for those as well.
Which is all good and correct but just pointing out for others usage that if an option/extension is added later then that will create a difference and you may need to remove the original and recreate or at minimum inform users that something new was added and to delete/create their own states again.
Thank Kevin!
My 2 cents, but I think this might be a nice feature to opt into whenever an update is made to the stateRestore extension. It just seems that letting a user endlessly click 'createState' and duplicating a current state without warning is a problem.
Agreed - I can see that this might be quite desirable. I've added it to my list
Thanks for the feedback!
Allan
@allan - Thank you!
For now, I am implementing what @kthorngren suggested.
My mostly working example with a modal - https://live.datatables.net/nahotobe/8/edit
It works when you switch States but I cannot seem to find a trigger to make this occur when a user might "Create State", which would be ideal.
Any suggestions on that would be fantastic.
One option is to add a class name to the
Create Statebutton usingbuttons.buttons.className. Create an event handler for that button. For example:https://live.datatables.net/nahotobe/9/edit
Is this what you are looking for?
Kevin
@kthorngren Yes! That works perfectly for me. I was too busy looking into the code for something to trigger on, I overlooked the obvious of adding a class in the button options.
Thank you!