Using an inline "save" button to submit editor flickers old values briefly.
Using an inline "save" button to submit editor flickers old values briefly.
Link to test case:
https://live.datatables.net/rizoneki/1/edit
Debugger code (debug.datatables.net):
N/A
Error messages shown:
N/A
Description of problem:
I have a table that users can edit by clicking a row to open inline editing. Because our users might be on mobile, they always aren't able to press the return key to submit a row edit - so we've added an inline save button.
When a user makes a change to the table linked above (i.e. checking or unchecking the checkbox, that's all I've configured my postman endpoint to handle), and presses return, the edit applies beautifully.
However, if the user takes the same action and instead clicks my save button (which only has one action, calling editor.submit()), the editor window closes briefly and shows the pre-save value for a brief moment before reloading the row and showing the data that was returned from the server.
Ideally, I'd like both the return key and save button to behave the same - i.e. not showing the old value once the save button is clicked.
I've tried a bunch of things, including manually modifying the row's underlying data() value and forcing a redraw at each of presubmit/postsubmit/submitcomplete, but I can't get the old values to stop showing up for that brief moment when clicking the save button. Any help would be vastly appreciated.
This question has an accepted answers - jump to answer
Answers
Hi,
Many thanks for the test case! The issue here is that the button is outside of the field, and Editor will see that as causing a "blur" action. You could possibly use submit on blur, but then your button is meaningless - any tap away would cause the save action (which might be desirable if you want to loose the button).
What I would suggest, to get as close as possible to your example, is to use the
submitHtmlandsubmitTriggeroption ofform-options. This is typically used in full row editing but there is no reason why it couldn't be limited to a single cell.I've updated your example to use that here.
The other option (since there is always more than one!
) is to use the
buttonsoption ofform-options.This is your example updated with that ability.
Allan
Thanks so much for the help, that clears things up.