[Editor] - h is not a function

VascoSaavedra

I'm having a strange error on editor 1.7.4): when losing the focus on an editable cell, i'm having the following error:

        Uncaught TypeError: h is not a function
            at Object.eval (eval at <anonymous> (jquery-1.12.4.js:349), <anonymous>:1826:26)
            at Function.each (jquery-1.12.4.js:376)
            at f._submitTable (eval at <anonymous> (jquery-1.12.4.js:349), <anonymous>:1824:7)
            at f._submit (eval at <anonymous> (jquery-1.12.4.js:349), <anonymous>:1807:134)
            at o (eval at <anonymous> (jquery-1.12.4.js:349), <anonymous>:1194:39)
            at f.submit (eval at <anonymous> (jquery-1.12.4.js:349), <anonymous>:1206:3)
            at HTMLTableElement.<anonymous> (datatables.min.js:355)
            at HTMLTableElement.fn (jquery-1.12.4.js:4825)
            at HTMLTableElement.dispatch (jquery-1.12.4.js:5226)
            at HTMLTableElement.elemData.handle (jquery-1.12.4.js:4878)

The error happens on line 1805, when executing the following code:

            !1 === this._event("preSubmit", [x, r]) ? this._processing(!1) : (this.s.ajax || this.s.ajaxUrl ? this._ajax : this._submitTable).call(this, x, function(c, d, f) {
                i._submitSuccess(c, d, x, t, i.s.action, h, e, a, b, f)
            }, function(a, c, e) {
                i._submitError(a, c, e, b, x, i.s.action)
            }, x)

The problem most certainly is not on datatables/editor, but probably in something in my end.
It could be a file missing, or loaded in an incorrect order, etc ...

Do you have any idea that could help me understanding the problem?

The debugger can be seen here: https://debug.datatables.net/irusep

allan

Could you give me a link to a page showing the issue so I can debug it please? Also, can you show me your Javascript code for DataTables and Editor?

Allan

VascoSaavedra

I'm sorry, the page is not acessible online.

This is the Datatables/Editor code:

editor = new $.fn.dataTable.Editor({
    table: "#table",
    fields: editorFields
});
 
 
datatable = $("#table").DataTable({
    ajax: {
        url: getUrl(),
        data: createBaseRequest(),
        type: "POST",
        datatype: "json",
        error: function(xhr, error, thrown) {
            const json = $.parseJSON(xhr.responseText);
            swal(json.Message, json.ExceptionMessage, "error");
        },
        dataSrc: ""
    },
    columns: datatableColumns,
    bPaginate: false,
    bFilter: false,
    bInfo: false,
    bSort: false,
    bSortable: false,
    scrollX: true,
    scrollY: "200px",
    scrollCollapse: true,
    keys: {
        editor: editor,
        editOnFocus: true
    },
    select: {
        style: 'single'
    }
});
 
// Select all row when on focus
datatable.on('key-focus', function(e, datatable, cell, originalEvent) {
    datatable.row(cell.index().row).select();
});
 
// Storing last KeyDown
datatable.on('keydown', function(e, datatable, cell, originalEvent) {
    focusKey = e.keyCode;
});
 
//check if we are on last column, if so, add new line
datatable.on('key-blur', function(e, d, cell) {
    const td = $(cell.node());
    const parent = td.parent('tr');
 
    if (parent.is(':last-child') && td.is(':last-child')) {
        if (focusKey === addNewLineKey) {
            addNewRowInternal(datatable);
        }
    }
});

allan

Can you show me what editorFields and datatableColumns are please?

Also, can you give me the steps you take to cause the error to happen? Does it happen on load, on submit, on edit, etc?

Without being able to see the page there will probably be other information I need as well, such as the client / server data interchange, but that will depend on went the error is happening.

Allan

VascoSaavedra

@allan, as i cannot post it on a public forum, i sent the full code by email.

The error happens only when editing.
When the user focus on an editable column, when the column loses the focus, the error happens.

allan

I'm afraid I didn't get that e-mail. Could you send it again please? allan @ this domain .net.

Allan

VascoSaavedra

I've just resend the email, thank you!

allan

I'm sorry, but I still don't appear to have an e-mail from you. Could you send the information in a Private Message in the forum instead? Click my forum user name above and then the "send message" button.

Allan

VascoSaavedra

@allan, reverting to 1.7.3 corrected the problem, so this seems related to version 1.7.3.

PS: Sent the file by PM.

allan

Ah! I think I know what it is in that case. Have you also updated your DataTables install? Local table editing used an API method that was introduced in DataTables 1.10.18 to fix a bug in it.

Allan

VascoSaavedra

I see, we are still using DataTables 1.10.16.

I assume i would need to have Datatables >= 1.10.18 in order to use Editor 1.7.4?

allan

Yes please. It should be a drop in replacement.

Allan

VascoSaavedra

I've updated Datatables to 1.10.18, and the initial problem is now solved.

Has anything changed regarding the way the Editor detects the changes?

The following code has a different behavior on 1.7.3 vs 1.7.4:

editor.field('field').input().on('change', function(e, d) { const newValue = $(this).val();

• On 1.7.3 => this is only triggered after the user completed the input
• On 1.7.4 => this is triggered as soon as the user types anything.

For example, if the user wants to type: "Test":
* On 1.7.3 => newValue = Test
* On 1.7.4 => newValue = T

VascoSaavedra

I'm having another issue with 1.7.4.
Now, the Editor does not edit on focus, even though the property is defined as true:

                keys: {
                    editor: editorRef,
                    editOnFocus: true
                },

allan

In this example your input event works as expected in 1.7.4 for me:

editor.field('first_name').input().on('change', function(e, d) {
  console.log( $(this).val() );
} );

Regarding KeyTable - did you also update KeyTable?

Allan

VascoSaavedra

Yes, to 2.4.1 version.

Debugger shows the following information:

• DataTables 1.10.18 A new version (1.10.19) is available.
• Editor 1.7.4 Up-to-date
• KeyTable 2.4.1 Up-to-date
• Select 1.2.6 A new version (1.2.7) is available.

VascoSaavedra

Debugger full info here: https://debug.datatables.net/omisok

allan

You are correct - there appears to be a bug there - example.

I'm currently working on KeyTable 2.5 which will actually see a number of changes - double click to trigger immediate editing and single click to get the current behaviour. The editOnFocus option won't be used any more.

Discussion about the new features available here.

Allan

VascoSaavedra

Allan, thank you very much for your quick reply.

Could you please provide an estimate on when KeyTable 2.5 will be released?

VascoSaavedra

If i'm interpreting it correctly, will the Edition only be possible by clicking?

I'm asking because in our use case, the behavior provided by editOnFocus is very important.

Could you please clarify?

VascoSaavedra

@allan, i'm sorry to insist, could you please clarify the above?

Thank you!

allan

I don't currently have a time frame for the 2.5 release - I don't expect it to be too far away though.

I will attempt to fix editOnFocus for a 2.4.x patch release and post back with how I get on.

In 2.5 editOnFocus will be removed. You can go to immediate edit mode by double clicking, or typing after a single click.

Allan

allan

I've committed a fix onto a 2.4 branch - which you can get here. That addresses the editOnFocus issue, and maintains the features you are used to from 2.4.

Allan

VascoSaavedra

Thank you for the fix on 2.4.

Regarding editOnFocus, would it be possible to also go to edit mode if Enter is pressed?

allan

In 2.5? Yes, it does that.

Allan

VascoSaavedra

Thank you!