Editor: inline > onBlur seems always be activated

danwos

Hi all,

I'm using the datatables editor and have implemented the inline editing function.
Everything is working as expected, except one use case:
* User clicks on field
* User adds data
* User does NOT press ENTER, but clicks another field or outside the table
* Field gets closed.

Expected behavior:
* No data is changed / No data is send to the server

Current behavior
* Data is send to server
* Data is changed
* If the data was invalid:
* Error message is shown under the next field the user opens and not under field, where the data was changed.

There is an example how to activate this behavior: https://editor.datatables.net/examples/inline-editing/options.html
But in my case, I have not activate it and I see no way to deactivate it.

My inline activation code is

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

Any ideas, what I have misconfigured?

Daniel

allan

Hi Daniel,

Are you using a one-to-many join or a complex input field type such as selectize or some other plug-in? Can you show me your Editor initialisation code please?

Thanks,
ALlan

danwos

Hi Allan,

no one-to-many join, but maybe a complex input field (datetime).

My editor initialisation code:

var editor = new $.fn.dataTable.Editor( {
    ajax: "/api/datatable/entry/{{ node.user.user }}/{{ node.path }}",
    table: '#entries-table',
    idSrc: 'id',
    fields: [ {
            label: "Value:",
            name: "value",
            type: "text"
            },
            {
            label: "Entry timestamp",
            name: "timestamp",
            type: "datetime",
            format:  'YYYY-MM-DD[T]HH:mm:ss',
            opts: {
                momentStrict: true,
                momentLocale: "de"},
            }]
    } );

I have also registered a couple of events:

    // Activate an inline edit on click of a table cell
    $('#entries-table').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this, {} );
    } );

    editor
        .on( 'edit', function (e, json, data) {
            load_highcharts_data();
        })
        .on( 'create', function (e, json, data) {
            load_highcharts_data();
        })
        .on( 'remove', function (e, json, data) {
            load_highcharts_data();
        });

    // Disable KeyTable while the main editing form is open
    editor
        .on( 'open', function ( e, mode, action ) {
            if ( mode === 'main' ) {
                entries_table.keys.disable();
            }
        } )
        .on( 'close', function () {
            entries_table.keys.enable();
        } );

To make the code complete, here is my datatable initialisation:

var entries_table = $("#entries-table").DataTable({
        dom: "<'top'<'#dtl'l><'#dtf'f><'#dtb'B>>rt<'bottom'ip>",
        ajax: "/api/datatable/entry/{{ node.user.user }}/{{ node.path }}",
        order: [[1, "asc"], [2, "asc"]],
        rowId: "id",
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "timestamp" },
            { data: "value" },],
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
        select: {
            style:    'os',
            selector: 'td:first-child',
            blurable: true
        },
        keys: {
            columns: ':not(:first-child)',
            editor:  editor
        }
    });

I do not see any black voodoo inside my code...

Hint: The {{ }} inside the ajax-urls are coming from jinja and are replaced by strings during server-side HTML generation.

Daniel

allan

Hi Daniel,

Thanks for the extra information! The datetime field type is really just a string value, so it wouldn't be that causing the issue.

I'm afraid I don't see anything wrong with your configuration above! Are you able to send me a link to the page so I can debug it? You can PM me by clicking my name above and then the "Send message" button.

Thanks,
Allan