Row details - TypeError: undefined is not an object (evaluating 'a[0].aoData[this[0]]._detailsShow')

Row details - TypeError: undefined is not an object (evaluating 'a[0].aoData[this[0]]._detailsShow')

phoenixstuphoenixstu Posts: 5Questions: 2Answers: 0

Hi there,

I'm using this as an example for row details:
https://datatables.net/examples/server_side/row_details.html

All works fine apart from one thing. I'm having an error by following this method:

1.Records loaded, and I use dropdown filters producing results.. child row works fine
2. Records are filtered producing 'no records found'
3. Then filtered again to show records - display fine.. clicking a child row expand button now shows this:

TypeError: undefined is not an object (evaluating 'a[0].aoData[this[0]]._detailsShow')

The error only shows after 'no records' I think it may have something to do with the data being destroyed but not being reinitialised? The data is shown fine after filtering but I can't see the child row data when expanding it.

Function with the issue appears to be here.. see comment in bold:

$('#product_data tbody').on( 'click', 'td.details-control', function () {
            
        var theid = $(this).text();
        console.log(theid);
       var tr = $(this).closest('tr');
        var row = dataTable.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
        
        if ( row.child.isShown() ) { // THIS IS WHERE THE ISSUE IS?
             tr.removeClass('shown');
            row.child.hide();
 
            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            row.child( format(row.data()) ).show();
            tr.addClass( 'shown' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
                //console.log(detailRows);
            }
        }
    } );
dataTable.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
            console.log(id);
        } );
    } );

 }

Any help appreciated and if you need all the JS I can post it.

Thanks

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Guessing the problem is this code?

    dataTable.on( 'draw', function () {
            $.each( detailRows, function ( i, id ) {
                $('#'+id+' td.details-control').trigger( 'click' );
                console.log(id);
            } );
        } );
    

    Is this meant to open the child rows after each draw? Maybe detailRows is referencing rows that are not in the table. Please post a link to your page or a test case so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • phoenixstuphoenixstu Posts: 5Questions: 2Answers: 0

    Hi Kevin,

    Thanks for your reply.

    You can view the page here:

    http://www.digitalseed.eu/qualifications_temp/

    You will see using + / - buttons child rows work fine

    To reproduce the error:

    1. Dropdown Filter Country to 'Belgium', then filter Profile Type to 'Crops'
      No matching records found - fine
    2. Take off the profile type filter to show records
    3. Then click the + / - Buttons and you will see the error in the console.

    I can't work out what it is. I saw a few other posts mentioning a similar problem and tried using clear() instead of destroy() but that broke it completely so a bit lost.

    It only happens after 'No matching records found'. Is there a workaround?

    Appreciate the help!

    Thanks

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    Thanks for the example, that helped a lot. If you watch your console statements you will see each time you filter the table and additional set of console.log statements appear when opening the child. The Datatable is destroyed which is fine then you call load_data() which initializes a new Datatable. Additionally it invokes your $('#product_data tbody').on( 'click'..... click event which is appending a new click event to the previous event(s).

    Either move the click event outside the function so its invoked only once or use jQuery off() to turn it off then back on like this:
    $('#product_data tbody').off().on( 'click'.....

    Kevin

  • phoenixstuphoenixstu Posts: 5Questions: 2Answers: 0

    Thanks Kevin, that did the trick!

    You rock, thanks :)

This discussion has been closed.