Cannot read property 'submit' of undefined

blabablaba

Hi Allan,

The code below generates a single column datatable with an inline editable field using Select2. The Select2 will update the server on change.

Upon clicking the Select2 field, the console generates an error "Cannot read property 'submit' of undefined".

console.log(editor) shows editor is defined however.

I have done a lot of searching for an answer, I'm not sure if there is something obvious I have missed. The table renders nicely, Select2 works, editor appears to be defined... but submit generates an error hence the ajax update to server does not fire.

I hope you can help and thanks as always,

Steve

editor = new $.fn.dataTable.Editor( {
    ajax: {
        url: 'https://www.example.com',
        success: function(json){
            aCmd(json);
        }
    },
    table: "#adminDt",
    fields: [
        {
            label: "Website State:",
            name: "wsState_ID",
            type: "select2",
            attr: {
                required: true
            },
            opts: {
                placeholder: 'Web State'
            }
        }
    ]
} )

// Activate an inline edit on click of a table cell
$('#adminDt').on( 'click', 'tbody td.editable', function (e) {
    editor.inline( this )
} )

editor.field( 'wsState_ID' ).input().on( 'change', function () {
//    console.log('we are here')
console.log(editor)
  editor.submit();  ######################### <----- PROBLEM HERE
} )


var table = $('#adminDt').DataTable( {
    dom: "Bfrtip",
    ajax: {
        data: {
            a_ID: 6
        }
    },
    columns: [
        { title: 'Website State', data: 'wsState', editField: 'wsState_ID', className: 'editable dt-center' }
    ],
    select: {
        style:    'os',
        selector: 'td:first-child'
    },
    buttons: [
        { extend: "edit",   editor: editor },
    ]
})

allan

editor.field( 'wsState_ID' ).input().on( 'change', function () {
//    console.log('we are here')
console.log(editor)
  editor.submit();  ######################### <----- PROBLEM HERE
} )

So the console.log shows a value, but editor.submit() throws an error? Must unexpected. I'd really need a link to a page showing the issue to be able to help you with that one I'm afraid.

Allan

blabablaba

Hi Allan, thank you for responding. I have sent you an email containing a web address where the problem is recreated.

I look forward to hearing from you.

blabablaba

Hi Allan, I used the datatables debugger (https://debug.datatables.net/) - Great tool! The debugger did not find any errors with my script.

Editor is up to date, though there is a new version of datatables (1.10.19). My version is 1.10.18. The latest version 1.10.19 is available on CDN but not yet available for download / local hosting. Is there usually a short delay between CDN release and download release?

allan

Actually 1.10.18 and 1.10.19 are code identical. There was an error in the packaging for npm which required a new release, which is why 1.10.19 exists. We'll be doing a 1.10.20 release soon which will bring them back into sync.

Thanks for the link - that lead me straight to the issue.

What is happening is that editor.submit() is being called before the editing has fully been setup for the field. More specifically, there is a conflict here:

$('#adminDt2').on( 'click', 'tbody td.editable', function (e) {
    editor.inline( this )
} )

editor.field( 'wsState_ID' ).input().on( 'change', function () {
    editor.submit();
} )

The click event triggers an inline action which causes a change event (since the value has to be set in the field) which immediately attempts to submit the value - even before the inline action has completed.

The error message that submit is not defined is actually coming from inside Editor because the setup is not complete.

You don't want to submit when Editor sets the value of the field so you could use:

editor.field( 'wsState_ID' ).input().on( 'change', function (e, d) {
    if ( !d || !d.editor ) {
        editor.submit();
    }
} )

This works because Editor will set d.editor to true when it is setting a field value (e.g. when starting an edit).

Thanks,
Allan

blabablaba

Superb Allan, thank you.