onBlur: 'submit'

onBlur: 'submit'

rf1234rf1234 Posts: 2,991Questions: 87Answers: 421

Just to share a discovery that was important for me. I have always had problems with inline editing and submitting values "onBlur". It worked but in some cases it didn't work. I mostly have only a few columns editable for inline editing.

For example using the following jQuery event handler to detect a click on an inline editable field, editing the field and then leaving the field would only successfully update the field when editing the field for the second time, not immediately after the row had been created with my modified create button. Solution: Add the seemingly redundant form option

onBlur: 'submit'

to the Editor instance as well - even though it is included in the call to the inline editor in the jQuery event handler. Then it works every time. Took me months to figure this out. Hence I am sharing.

The modified create button to create a new inline-editable row:

buttons: [
    {   extend: "create", editor: editor,                  
            action: function ( e, dt, node, config ) {
                empty = true;
                var self = editor;
                self.create( false )
                    .set( { 'ctr_event.ctr_id': parentId,
                            'ctr_event.event_msg': ''} )
                    .submit();
            }
    },
    {   extend: "remove", editor: editor},
],

The jQuery event handler to detect a click on an inline-editable field:

$('#table').on( 'click', 'tbody td.eventInline', function (e) {
    editor.inline(this, {
        onBlur: 'submit' //submission on blur
    } );
} )

The formOptions - inline to make sure submit onBlur also works for newly created records:

var editor = new $.fn.dataTable.Editor( {
    ajax: {
        url: 'actions.php?action=table',
        data: function ( d ) {
            d.parent_id = parentId;
        }
    },
    table: "#table",
    formOptions: {
        inline: {
            submit: 'allIfChanged',
            onBlur: 'submit' //make sure onBlur submission works all the time!!
        }
    },
    fields: [ .....

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    Interesting - as you say, that should be redundant since the inline() call that you have sets onBlur. If you are able to give me a link to a page showing the issue I'd be happy to take a look into it.

    Allan

This discussion has been closed.