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

dariov · February 29

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 · February 29

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 · February 29

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

allan · March 1

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 · March 1

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

Kevin

allan · March 1

Doh! Link corrected.

dariov · March 1

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 · March 1

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

Allan

dariov · March 1

@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 · March 1

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 · March 1

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 · April 17

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 · April 18

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 · April 18

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 · April 18

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 · April 18

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 · April 18

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

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

Do you know what should I add?

allan · April 19

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 · April 19

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

jybleau · April 19

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 · April 22

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 · April 22

Thank you - I'll take a look tomorrow

Allan

jybleau · April 26

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 · May 7

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 · May 7

Thank you - committed here.

Allan

jybleau · May 7

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 · May 7

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

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

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

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

Replies

Howdy, Stranger!

Categories

DataTables

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

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

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables