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

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

dariovdariov Posts: 25Questions: 4Answers: 0

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.

Replies

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited 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

  • dariovdariov Posts: 25Questions: 4Answers: 0
    edited February 29

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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    edited 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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

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

    Kevin

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Doh! Link corrected.

  • dariovdariov Posts: 25Questions: 4Answers: 0

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

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

    Allan

  • dariovdariov Posts: 25Questions: 4Answers: 0

    @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",

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • dariovdariov Posts: 25Questions: 4Answers: 0

    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 :)

  • jybleaujybleau Posts: 14Questions: 1Answers: 0

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • jybleaujybleau Posts: 14Questions: 1Answers: 0

    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;
    
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • jybleaujybleau Posts: 14Questions: 1Answers: 0

    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.

  • jybleaujybleau Posts: 14Questions: 1Answers: 0

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

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

    Do you know what should I add?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • jybleaujybleau Posts: 14Questions: 1Answers: 0

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

  • jybleaujybleau Posts: 14Questions: 1Answers: 0

    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... _

  • jybleaujybleau Posts: 14Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Thank you - I'll take a look tomorrow :)

    Allan

  • jybleaujybleau Posts: 14Questions: 1Answers: 0

    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.

  • jybleaujybleau Posts: 14Questions: 1Answers: 0

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Thank you - committed here.

    Allan

  • jybleaujybleau Posts: 14Questions: 1Answers: 0

    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-iammwashuit-iamm Posts: 121Questions: 51Answers: 2
    edited May 7

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

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

Sign In or Register to comment.