Submit

Loren Maxwell

I have a table with about 2500 records and three of the fields feature inline editing. I am also using KeyTable to tab between the entries.

The desired behavior is that the submission will occur on blur only if the data in that cell has changed.

My understanding of this post: https://datatables.net/forums/discussion/comment/74318/#Comment_74318
is that the desired behavior would be the default behavior by either Editor 1.5 or 1.6 (I am using 1.6.2).

However, with the code below the form submits every time I exit a cell, whether I have changed any data or not:

    // Activate an inline edit on click of a table cell
    $('#game_index').on( 'click', 'tbody td.inline', function (e) {
        editor.inline( this, {
                onBlur: 'submit',
                submit: 'allIfChanged'
            }
        );
    } );
    
    // Inline editing on tab focus
    table.on( 'key-focus', function ( e, datatable, cell ) {
        editor.inline( cell.index(), {
                onBlur: 'submit',
                submit: 'allIfChanged'
            }
        );
    } );

That makes sense because of the onBlur: 'submit' statement, however when I removed onBlur: 'submit', from each function), the form submits only when after I press return and not when the cell loses focus:

    // Activate an inline edit on click of a table cell
    $('#game_index').on( 'click', 'tbody td.inline', function (e) {
        editor.inline( this, {
                submit: 'allIfChanged'
            }
        );
    } );
    
    // Inline editing on tab focus
    table.on( 'key-focus', function ( e, datatable, cell ) {
        editor.inline( cell.index(), {
                submit: 'allIfChanged'
            }
        );
    } );

This post: https://datatables.net/forums/discussion/comment/92106/#Comment_92106
outlines a similar issue when using Selectize, but I don't use Selectize (although I do have a few type: 'select' fields).

A final note is that allIfChanged is required for each submission for some additional processing on the server side.

Anyway, is there a setting I have overlooked that will submit on blur only if the data has changed?

Rob Brun

Hi Loren Maxwell, I was having a similar issue with inline edit and keyTable. What I ended up having to do is in the initialization of my editor configure the formOptions property.

 formOptions: {
    inline: {
       submit: 'allIfChanged'
    }
},

https://editor.datatables.net/reference/option/formOptions

Shay

allan

Shay is spot on. KeyTable makes its own call to the inline() method, so you need to use the formOptions.inline object to set the submit parameter globally for that Editor instance.

Allan

Loren Maxwell

Thanks, Shay and Allan. I've made the changed but now I get some odd behavior.

I've updated the instance of editor to:

    editor = new $.fn.dataTable.Editor( {
        table: '#game_index',
    ajax: {
        url: '../extensions/GHSFHA/models/SeasonGamesIndex.php',
        type: 'POST',
        data: {
            season: '<?= $theSeason ?>'
        }
    },
        fields: [
            { label: 'Season:', name: 'season_name' },

<BLAH BLAH BLAH>

            { label: 'Team:', name: 'team_name' },
            { label: 'Opponent:', name: 'opponent_name' },
            { label: 'Scored:', name: 'scored' },
            { label: 'Allowed:', name: 'allowed' },

<BLAH BLAH BLAH>

        ],
        formOptions: {
            inline: {
               submit: 'allIfChanged'
            }
    }

And I've cleaned up the other functions to:

    // Activate an inline edit on click of a table cell
    $('#game_index').on( 'click', 'tbody td.inline', function (e) {
        editor.inline( this );
    } );
    
    // Inline editing on tab focus
    table.on( 'key-focus', function ( e, datatable, cell ) {
        editor.inline( cell.index() );
    } );

However when I make an entry in "Cell A" and either key or click to "Cell B", it does not submit, but when I key or click to another cell from "Cell B", it will then submit for Cell B even if I have made no change.

Rob Brun

Hi Loren Maxwell I am guessing try this in your inline function or form options

submitOnBlur: true

Shay

Loren Maxwell

Shay, that works except that it simply submits for every on blur instead of only the ones with the changed data.

Also, I think onBlur: 'submit' does the same and is an updated version of that command.

allan

That's odd! Can you link to a page showing the issue so I can take a look into it. Are you using the keys.editor option? If so, you don't need to call inline() at all yourself, KeyTable will do it for you.

Allan

Loren Maxwell

No problem, Allan. It's password protected, so I'm PMing you the information.

Loren Maxwell

BTW I am using both the keys.editor option and the inline API, so maybe that's the issue, but I'll leave it as is until you get a chance to look at it so that I'm not changing it around on you as you're looking at it.

allan

Yes, if you could only use one of them that would help. At the moment it will be doubling up on the events.

I'm just about to dash out, but I'll take a look when I get back.

Regards,
Allan

Loren Maxwell

Thanks, Allan.

I removed the keys.editor and now it only submits when I hit enter, so I must still not have it set up correctly, although I believe I've followed the examples.

Anyway, I've set everything back to where it was so that you can see the original code and troubleshoot from there.

I greatly appreciate your willingness to look and thanks for an outstanding software package!

Loren Maxwell

OK, I got it by removing the "key-focus" function..

I was expecting the cell to open up for edit on focus and didn't realize all I had to do was to start typing.

allan

Super - great to hear you've got it working now. Thanks for posting back!

Allan