Why am I getting the error "caught TypeError: Cannot read property 'style' of undefined"?

StanR

I have two working pages: one with child rows and one with check boxes. When I try use both features on a single page, I get the error: "caught TypeError: Cannot read property 'style' of undefined"

Does anyone have time to skim this page and see if you can spot the problem.

/* Formatting function for row details - modify as you need */
function format ( d ) {
    console.log(d);
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Explanation:</td>'+
            '<td>'+d.explanation+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Groovydoc:</td>'+
            '<td>'+d.groovydoc+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Source Code for Class:</td>'+
            '<td>'+d.source_code+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Example of Use:</td>'+
            '<td>'+d.use_case+'</td>'+
        '</tr>'+
    '</table>';
}

var example;

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        "ajax": "../php/checkbox.php",
        "table": "#example",
        "fields": [ {
                label:     "Active:",
                name:      "active",
                type:      "checkbox",
                separator: "|",
                options:   [
                    { label: '', value: 1 }
                ]
            }, {
                label: "Category:",
                name:  "category"
            }, {
                label: "Test:",
                name:  "test"
            }, {
                label: "Automated:",
                name:  "automated"
            }, {
                label: "Request/Response:",
                name:  "request_response"
            }, {
                label: "Explanation:",
                name:  "explanation"
            }, {
                label: "Groovydoc:",
                name:  "groovydoc"
            }, {
                label: "Source Code for Class:",
                name:  "source_code"
            }, {
                label: "Example of Use:",
                name:  "use_case"
            }
        ]
    } );

    var table = $('#example').DataTable( {
        "dom": "Bfrtip",
        "ajax": "../php/checkbox.php",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "category" },
            { "data": "test" },
            { "data": "automated" },
            { "data": "request_response" },
/*          { "data": "explanation" },
            { "data": "groovydoc" },
            { "data": "source_code" },
            { "data": "use_case" }, */
            {
                data:   "active",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return data;
                },
                className: "dt-body-center"
            }
        ],
        select: {
            style: 'os',
            selector: 'td:not(:last-child)' // no row selection on last column
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
        rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
            $('input.editor-active', row).prop( 'checked', data.active == 1 );
        },
        "order": []
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        console.log('click event');
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );


    </script>
</head>
<body class="wide comments example">

    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Category</th>
                <th>Test</th>
                <th>Automated</th>
                <th>Request/Response</th>
                <th>Active</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Category</th>
                <th>Test</th>
                <th>Automated</th>
                <th>Request/Response</th>
                <th>Active</th>
            </tr>
        </tfoot>
    </table>

</body>
</html>

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

allan

You have 6 columns defined in your columns array, but only 5 in the HTML.

Allan

StanR

Thanks! I didn't know that that first column counted as a column. My fault.