Submitting Full Row on Tab Change

kmor

Hi,

I am referring to below example on Data Table for Inline editing

https://editor.datatables.net/examples/inline-editing/submitData.html

This example submit the complete row when "Return" is hit.

I want to submit the full row of data when we "Tab" out from the cell.

Is this possible in Editor? If yes, then could you please help me to achieve this?

Thanks,
Karamvir Mor

allan

Hi Karamvir,

Thanks for your message. Do you want the focus to then move on to the next cell when you press tab? If so, this example which uses KeyTable to provide the key handling should work well for you.

Note you will probably also wish to set the onBlur: 'submit' option in form-options object when you call inline().

Regards,
Allan

WilliamW

Hi Allan,

I believe the issue is that the TAB action only sends the field that was modified (i.e. [last_name]) instead of all fields in the row being edited. In the link to the example you reference, I changed the last name for Row 6, and the Ajax Data submitted is:

action=edit
data[row_6][last_name]=Williamson%2C Jr.

The same action happens when you modify the field and hit <return> - the Ajax data submitted is only the field modified.

In the example that Karamvir referenced:

• https://editor.datatables.net/examples/inline-editing/submitData.html

...you can edit a field, and if you hit "<return>", the entire row dataset is submitted:

action=edit
data[row_6][first_name]=Brielle
data[row_6][last_name]=Williamson%2C Jr.
data[row_6][position]=Integration Specialist Mgr.
data[row_6][office]=New York
data[row_6][extn]=4804
data[row_6][start_date]=2012-12-02
data[row_6][salary]=372000

In the above example, I added "Mgr." to the [position] field and hit <return> which submitted all fields in the row.

It looks like the way to submit the entire row of data is by adding the "allIfChanged" option:

    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {
            submit: 'allIfChanged'
        } );
    } );

...but this does not seem to work with inline-edit and a <TAB> action.

Any chance you have an example with inline-editing where a TAB out of a modified field will submit the entire row of data? We would really like to use the inline-edit feature, but my understanding from Karamvir is that our back-end handler will be easier to implement for Change or Update if we have the full row of data submitted.

Thanks for your help, Allan!

William

allan

Hi William,

Thanks for the clarification! The way to set the submit option of the form-options object when using KeyTable is to use the formOptions.inline object. For example:

var editor = new $.fn.Editor( {
    ajax:  "php/staff.php",
    table: "#myTable",
    formOptions: {
        inline: {
            submit: 'allIfChanged'
        }
    }
} );

The reason for this is that KeyTable calls inline() itself, so we need to be able to set the form options. Using the initialisation options as above is how that can be done.

Regards,
Allan

WilliamW

Thank you for clarifying, Allan! I believe that we have this working now.

William

allan

Hi William,

Great to hear - thanks for the update.

Allan