inline editing, submit on blur, contents of undefined v this.node is not a function

stephen_d_wolff

I'm struggling with a datatables inline editing issue.

If i use submitOnBlur, ie:

editor.inline(this, {
    submitOnBlur: true
})

the server saves the data correctly, and it returns data in expected format.

Datatables then refreshes the entire table, and the error - Uncaught TypeError: Cannot read property 'contents' of undefined is triggered here:

        // Remove from DOM, keeping event handlers, and include text nodes in remove
        var children = node.contents().detach();

If i use the fix described here - https://datatables.net/forums/discussion/31895,

                editor.inline(table.cell(this).index(), {
                   onBlur: 'submit'
                } );

editing inline fails completely with this error:

datatables.js:93512 Uncaught TypeError: this.node is not a function, here:

DataTable.Api.registerPlural( 'cells().fixedNodes()', 'cell().fixedNode()', function () {
    return this.iterator( 'cell', function ( settings, row, column ) {
        return settings._oFixedColumns
            ? settings._oFixedColumns.fnToFixedNode( row, column )
            : this.node();
    }, 1 );
} );

Any idea how i can fix this?

stephen_d_wolff

Ok - so i've solved it, and got to understand how things work a bit more.

        let savedIndex;

        // Activate an inline edit on click of a table cell
        $('#datatable_list').on( 'click', 'tbody td.editable', function (e) {
                savedIndex = table.cell(this).index();
                setTimeout(triggerEditorInline, 500);
            } );
        });

        function triggerEditorInline() {
            let nodeNow = table.cell(savedIndex.row, savedIndex.column).node();
            editor.inline(nodeNow, {
                submitOnBlur: true
            });
        }

The key was to add .node() to retrieve the DOM node for the editor to detach.

ahanssens@cps247.com

I ran into this problem too. This is a bug in DataTables.

The bug manifests if you have the FixedColumns package loaded, but you're not using any fixed columns in the table in question. The bug doesn't show up in the official demo at https://editor.datatables.net/examples/inline-editing/serverSide.html because it doesn't use the FixedColumns package.

You can work around this problem by doing any of the following:
* Don't load the FixedColumns package.
* Include the "fixedColumns" parameter in the code that sets up the table, but set "leftColumns" to zero so that you don't have any fixed columns. (This would certainly be an odd way to use the package, and I don't know if this will cause any side effects.)
* Downgrade to an earlier version of DataTables. 1.10.18 doesn't have the bug. I didn't check any other versions.

colin

Hi @ahanssens@cps247.com ,

I don't think that's a bug - it's working as expected here with the FixedColumn extension library included.

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

ahanssens@cps247.com

The problem only shows up when using server-side processing.

I tried to create a live example based on the code at https://editor.datatables.net/examples/inline-editing/serverSide.html, but I had to give up without even being able to duplicate the example. It looks like staff.php is not available to live examples. (It's not listed as an available script in Technical Note 9.)

The example I was trying to create is at http://live.datatables.net/qesuqixe/1/edit.

colin

Hi @ahanssens@cps247.com ,

I tried it locally - taking this example which uses serverSide. I added FixedColumn extension's CSS and JS files, and the same inline code initiator as in my previous example, and everything still worked as expected - data was still submitted correctly on a blur.

I don't think there's much more we can do unless we can see the issue.

Cheers,

Colin

json81

Hi!
Did you find a solution to this problem? Inline editing is working for me when using the enter key. OnBlur saves the value the first time but not after the error has occurred once. I am also using server-side processing.

Error:
datatables.js:88528 Uncaught TypeError: Cannot read property 'contents' of undefined.

I can give private access to site and code, please PM me for info.

Best Regards
Anders

colin

Yep, we're happy to look, please PM me and either myself or Allan will take a look. If easier, please see if you can reproduce the issue in this test case - as that would be easier to debug.

Colin

smoldovanskiy

I am having this same issue. The proposed solution does not work for me.

smoldovanskiy

got it to work like so

  $('#@ViewData["id"]').on('click', 'tbody td div', function (e) {
            savedIndex = $(this)[0].parentNode._DT_CellIndex;
            setTimeout(triggerEditorInline, 500);  
        });

        
        $('#@ViewData["id"]').on('click', 'tbody td h5', function (e) {
            savedIndex = $(this)[0].parentNode._DT_CellIndex;
            setTimeout(triggerEditorInline, 500);  
        });

        function triggerEditorInline() {
            var table = $('#@ViewData["id"]').DataTable();
            let nodeNow = table.cell(savedIndex.row, savedIndex.column).node();
            editor.inline(nodeNow, {
                submitOnBlur: true
            });
        }

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Odd that you need that, but thanks for reporting back,

Colin

Vincent Godé

I got the same issue and I found the solution. This is because my :

editor.inline(table.cell(this).index(), {
   onBlur: 'submit'
} );

was in the wrong place.
In the Colin's example http://live.datatables.net/tudenefi/1/edit, it is at the bottom of the var table = $("#example").DataTable({ ...declaration.
I did that and the error have been solved.