Inline editor and submitting all cell data at once, instead of submitting individual cell changes

vincellc

When using inline editor to edit the cells of a DataTable, the default behavior is to submit the changes to the server when the cell is blurred. This results in a separate AJAX call for each cell edit. What I would like is to use a button to submit ALL changes at once after the user is done editing the table, instead of individual cell submissions. Anyone know how to do this?

allan

There is an example of how to do that available here.

Regards,
Allan

vincellc

The example you provided allows me to change every field in a given row if I use the checkbox and the "Edit" button, which brings up the editor modal window.

However, if I click on any of the cells, then change the value, and then click on the next cell, the changed value disappears and the original cell value is restored. What am I missing? Sorry to be a pain.

allan

It isn't submitting inline unless you press the return key since the onBlur: 'submit' option isn't set in that example.

The key element of the example I liked to is the submit: 'allIfChanged' option which it describes in the text at the top of the example.

If you want both that and onBlur, just use them both in the form-options object that you use.

Allan

vincellc

That's fine, I don't want it to submit neither onBlur, nor onReturn.

But why do my changes get lost when I switch to a different cell?

allan

Because they haven't been submitted to the server. If you don't submit them (i.e. save them) then they get lost (i.e. they are assumed to not be wanted). If you want to save the value you have to submit it.

Allan

vincellc

Thanks. That answers my question.

In order to reduce the number of AJAX calls to the server, I will have to code around this behavior to cache the changes on the client side, then set the cell values to what the user changed, and then submit all changes at once with a single AJAX call after the user is finished editing the table.

allan

Editor 1.6 has a local table editing option which might be useful. You would need to submit the saved data somehow, but that could be done with a simple Ajax call.

Allan

vincellc

Tried the "local table editing option", but the changes are still being discarded after an inline edit, because I'm not immediately submitting them.

The alternative would be to use the 'modal' editor instead of 'inline', but my table is already on a modal, so the Editor modal would have to be on top of my existing modal (which may still be an option, albeit a hairy one). Anyway, thank you for your help!

vincellc

I apologize, after doing a little more tinkering I realized what I was doing wrong. All I had to do was remove the "ajax" option, as you mentioned in your previous reply. Then I just attached a click handler as follows:

    tableSelector.on('click', 'tbody td', function () {
        editor.inline(this,{
            onBlur: 'submit'
        });
    });

And viola! All works as desired now. Thanks for your help!