Datatable 2.0 and responsive: Cannot read properties of null (reading '_details')

dariov

Link to test case: https://live.datatables.net/wuraxuci/7/edit

Error messages shown:
VM1902 dataTables.js:8076 Uncaught TypeError: Cannot read properties of null (reading '_details')
at HTMLTableElement.<anonymous> (VM1902 dataTables.js:8076:15)
at HTMLTableElement.dispatch (VM1900 jquery-3.7.1.min.js:2:40035)
at v.handle (VM1900 jquery-3.7.1.min.js:2:38006)
at Object.trigger (VM1900 jquery-3.7.1.min.js:2:70124)
at ce.fn.init.triggerHandler (VM1900 jquery-3.7.1.min.js:2:70811)
at _fnCallbackFire (VM1902 dataTables.js:6273:50)
at _fnAdjustColumnSizing (VM1902 dataTables.js:2140:3)
at _Api.<anonymous> (VM1902 dataTables.js:8552:4)
at _Api.iterator (VM1902 dataTables.js:6672:15)
at _Api.<anonymous> (VM1902 dataTables.js:8551:15)

Description of problem: this stopped working after updating to 2.0. Basically i have 2 tables. Each row ends with a + button. If the user clicks on it the item gets moved to table 2. If the table is fully opened it works fine but if you resize the window and click on the button you get the above error in console.

I use a function to get the row

function getDatatableTriggeredRow(trigger_el) { if (trigger_el.closest('li').length) { return trigger_el.closest('tr').prev('tr'); } else { return trigger_el.parents('tr'); } }

and it works fine in every page i use it except for this particular case.

kthorngren

Interesting problem. The error occurs when calling columns.adjust() in rowCallback. This occurs after the row().remove() in this event handler:

    $('body').on('click', '.btn-add-treatment-to-appointment', function() {
      var row = getDatatableTriggeredRow($(this));
        var data = table.row(row).data();
        table.row(row).remove().draw();
        notPerformedTreatments = table.data().toArray();
        table2.row.add(data).draw(true);
        performedTreatments.push(data);
    });

I commented it out in this updated test case:
https://live.datatables.net/luqefaxe/1/edit

@allan will need to take a look.

Kevin

dariov

@allan please ping me if you find a workaround for this.

allan

Thanks for the test case and Kevin for the analysis.

I've committed a fix and it is now in the nightly. Your example now runs without an error.

Allan

kthorngren

You linked to the wrong commit. Too many things happening at once

Kevin

allan

Doh! Link corrected.

dariov

hello @allan will you commit those changes to npm in a few hours? sorry but i need to know because my project is live and using nightly is a bit difficult

allan

No - it will be next week before I tag and release those changes. Sorry.

Allan

dariov

@allan ok, i see. In the meantime can you help me figure out how to use nightly ? this is an extract of my package.json:

"datatables.net-bs5": "^2.0.1", "datatables.net-buttons": "^3.0.0", "datatables.net-buttons-bs5": "^3.0.0", "datatables.net-responsive": "^3.0.0", "datatables.net-responsive-bs5": "^3.0.0", "datatables.net-rowgroup-bs5": "^1.5.0", "datatables.net-rowreorder-bs5": "^1.5.0", "datatables.net-select-bs5": "^2.0.0",

allan

This is the specific commit you want for the datatables.net npm package.

Try this for how to install at a specific commit. It's not something I've really done before.

Or patch your local copy of the file.

Allan

dariov

hello @allan thanks for the update. I managed to make it work editing the mjs file and then uploading it on the server to replace the bugged version. The i did npm run prod and it worked

jybleau

Hi @allan, I still have a similar problem with responsive and Datatables 2.0.4 (using Editor 2.3.2).

When doing an AJAX delete (remove) on a row with responsive hidden fields; in Datatables code, the _selector_row_indexes function returns the list of all remaining row ids (which is ok), but this list is returned in an array the length of the previous number of rows (before the delete).

This results in an undefined rowid in the returned array:
If I delete rowid 7, the result is: [0,1,2,3,4,5,6,8,9,undefined]

I started with 10 rows and deleted 1 row. At this moment there is 9 rows remaining, not 10 yet.

Then it crashed somewhere later in _fnGetCellData because of that undefined.

It seems to me the faulty line is here:
https://github.com/DataTables/Dist-DataTables/blob/490d27b3ed36f31c5a9aa7a1839ddabf3c590c52/js/dataTables.js#L7551

Maybe the settings.fnDisplayEnd() call should return 9, instead of 10 (?).

Or the for loop code could look like this:

  for ( i=settings._iDisplayStart, ien=settings.fnDisplayEnd() ; i<ien ; i++ ) {
    // Only push existing rows (some rows may have been removed)
    if ( displayFiltered[i] !== undefined ) {
      a.push( displayFiltered[i] );
    }
  }

I don't have the big picture, was just trying to come with a solution to fix my issue, the above code seems to work. I hope you have enought to figure it out.

As always, thanks

allan

Hi,

I've made a couple of commits to address this issue - could you try the nightly build please? I'll get 2.0.5 released with the fix this afternoon, but if you are able to verify the fix, that would be great.

This example showed the issue with 2.0.4, and is working with the nightly.

Allan

jybleau

Hi @allan still get an error at line 7904
Trying to reference nTr on null value, because the deleted row's value is null in ctx[0].aoData[ this[0] ]

Console output:

dataTables.js:7905 Uncaught TypeError: Cannot read properties of null (reading 'nTr')
    at _Api.<anonymous> (dataTables.js:7905:1)
    at _Api.node (dataTables.js:6847:1)
    at _Api.<anonymous> (dataTables.responsive.js:1143:1)
    at _Api.<anonymous> (dataTables.js:9552:1)
    at _Api.iterator (dataTables.js:6757:1)
    at _Api.<anonymous> (dataTables.js:9545:1)
    at _Api.every (dataTables.js:6847:1)
    at Responsive._resizeAuto (dataTables.responsive.js:1142:1)
    at _Api.<anonymous> (dataTables.responsive.js:1768:1)
    at _Api.iterator (dataTables.js:6727:1)

But it does work if we test for the object value by changing the code from:

return ctx.length && this.length && this[0].length ?
            ctx[0].aoData[ this[0] ].nTr || null :
            null;

To (like I think you already did elsewhere):

return ctx.length && this.length && this[0].length && ctx[0].aoData[ this[0] ] ?
            ctx[0].aoData[ this[0] ].nTr || null :
            null;

allan

Can you provide a test case showing the issue please? The example I gave, gives an error with 2.0.4, but not with 2.0.5.

Allan

jybleau

Ok, I'm trying to modify your example by adding the Editor, the edit/update/remove buttons and hiding some columns (so they become 'responsive')...

Should not be long.

jybleau

I can't make the "Delete" button to work.

https://live.datatables.net/qoliyehi/149/edit

Do you know what should I add?

allan

I don't think you will manage to with server-side processing on the live page, as there is no Editor backend.

Are you able to PM me a link to your page perhaps?

Allan

jybleau

Ok, no problem, I'm preparing something and will send it to you. Thanks

jybleau

Still not there yet, but I think I found a parallel problem with the responsive toggle controls:
https://live.datatables.net/rufivaga/7/edit

The controls are visible on page 1, but not on the next pages.
When coming back to page 1, they are visible again.

In the _controlClass function,
dt.cells(null, firstVisible, { page: 'current' }) returns no cells (empty array)
except on page 1. Odd.

_Still working on an example for the other problem (hosted on my side), this caugth my attention, could be related... _

jybleau

hi @allan , just sent a pm with a link for testing the errors mentionned above. You can get the error on deleting a row and also have the responsive toggle disappearing on page change, thanks.

allan

Thank you - I'll take a look tomorrow

Allan

jybleau

Hi @allan thanks for the fix on the first issue.

Concerning the responsible toggle control only showing on page 1, when using Server-side processing mode.

I found it could be fixed by re-adding code from version 1.

In function _selector_row_indexes (line 7534):

Reintroducing this code works (line around 7546):

        if ( _fnDataSource( settings ) == 'ssp' ) {
            // In server-side processing mode, most options are irrelevant since
            // rows not shown don't exist and the index order is the applied order
            // Removed is a special case - for consistency just return an empty
            // array
            return search === 'removed' ?
                [] :
                _range( 0, displayMaster.length );
        }

Your comments make sense, that's the problem I saw: it was trying to select rows from 10 to 20, but in SSP there is always rows 1 to 10 on each pages, depending on page len.

jybleau

Hello @allan

I got a similar error after delete again but here:

    _api_register( _child_obj+'.isShown()', function () {
        var ctx = this.context;
    
        if ( ctx.length && this.length ) {
            // _detailsShown as false or undefined will fall through to return false
            return ctx[0].aoData[ this[0] ]._detailsShow || false;
        }
        return false;
    } );

ctx[0].aoData[ this[0] ] can be null when a row has been deleted; still using server-side mode.

I have fixed like that (same pattern):

    _api_register( _child_obj+'.isShown()', function () {
        var ctx = this.context;
    
        if ( ctx.length && this.length && ctx[0].aoData[ this[0] ] ) {
            // _detailsShown as false or undefined will fall through to return false
            return ctx[0].aoData[ this[0] ]._detailsShow || false;
        }
        return false;
    } );

Do you want me to create a PR somewhere? If you would like to.

Thanks

allan

Thank you - committed here.

Allan

jybleau

Awesome, many thanks!

On a related subject: I've created a PR for the responsible toggle only showing on page 1. So you can better figure it out.
https://github.com/DataTables/DataTablesSrc/pull/280

washuit-iamm

Just ran into this. @allan when will that be released?

EDIT, just bumped to DT 2.0.7 and its working great.

hapi

First of all, I guess the last post above is SPAM.

I still face issues with server side and responsive after deleting.

datatables.js:104130 Uncaught TypeError: Cannot read properties of null (reading 'nTr')
at _Api.<anonymous> (datatables.js:104130:34)
at _Api.iterator (datatables.js:103117:17)
at _Api.<anonymous> (datatables.js:104129:15)
at _Api.nodes (datatables.js:103207:17)
at Responsive._resizeAuto (datatables.js:130145:47)
at _Api.<anonymous> (datatables.js:130751:20)
at _Api.iterator (datatables.js:103087:15)
at _Api.<anonymous> (datatables.js:130749:14)
at Function.recalc (datatables.js:103207:17)
at Editor.commit (datatables.js:110498:34)

I was able to fix it by changing:

    _api_register( 'rows().nodes()', function () {
        return this.iterator( 'row', function ( settings, row ) {
            //return settings.aoData[ row ].nTr || undefined;
            return settings.aoData[ row ]?.nTr || undefined;
        }, 1 );
    } );

But I am not much expert here... just a primitive desperate attempt of fixing.

allan

First of all, I guess the last post above is SPAM.

Missed it before. Doh. Yup, banned.

What version of Responsive are you using? The example here appears to work okay.

Allan

hapi

I think I am up to date?

/* Included libraries:
 *   jQuery 3 3.7.0, JSZip 3.10.1, ..., DataTables 2.1.8, Editor 2.3.2, ... Responsive 3.0.3, 
 */

I wrote my own Column Search plugin, but I think it is not causing this, as it is not doing anything between Delete and Draw.

I am using serverside, it may make a difference?

allan

Ah! Yes, server side might make a difference here. I think there is a fix in the current DataTables nightly that would be relevant here. I'll check when I get into the office tomorrow.

Allan