s.nTHead.parentNode == this || (s.nTFoot && s.nTFoot.parentNode == this) ) leads to Uncaught TypeError: Cannot read property parentNode of null

CS Lewis Published at Dev

CS Lewis

I have a jQuery DataTable that gets loaded properly when the page loads up when you first access it. The jQuery DataTable will contain all the proper data. I am also able to successfully add a new row to the DataTable. However, when you try to make further edits to existing rows, I get the following error:

here is the html table code:

  <div class="row">
                            <div class="table-responsive">
                                <table id="LogEventsTable" style="overflow-x: hidden !important; overflow-y: auto !important;" class="table table-striped panel panel-info">
                                <thead>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>

Here is the LoadLogEventsTable function that gets called every time edits are made:

  var LoadLogEventsTable = function (sortColumn, isDescending, logId) {
            $('#LogEventsTable').DataTable({
                "aoColumns": [
                                 { "sTitle": "#" },
                                 { "sTitle": "LogEventValueId" },
                                 { "sTitle": "Status Code" },
                                 { "sTitle": "Start Time (24 hr clock)" },
                                 { "sTitle": "End Time (24 hr clock)" },
                                 { "sTitle": "Duration" },
                                 { "sTitle": "Latitude" },
                                 { "sTitle": "Longitude" },
                                 { "sTitle": "Location Description" },
                                 { "sTitle": "Remarks" },
                                 {
                                     // credit to http://legacy.datatables.net/usage/columns
                                 // (mData) This property can be used to read data from any JSON data source property,
                                 // including deeply nested objects / properties. mData can be given in a 
                                 // number of different ways which effect its behaviour: 
                                 // null - the sDefaultContent option will be used for the cell
                                 // (null by default, so you will need to specify the default
                                 // content you want - typically an empty string). This can be
                                 // useful on generated columns such as edit / delete action
                                 // columns.
                                 "mData": null,
                                 "mRender": function (obj) {
                                     //  var userId = obj[0].toString();
                                     // alert(obj.DT_RowId);
                                     return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewLogEventHistory(this)"  >Log Event Hist</a>';
                                     //   return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewParticularLogsInfo(this)"  >Edit</a>';
                                 }
                             },
                             {
                                 // credit to http://legacy.datatables.net/usage/columns
                                 // (mData) This property can be used to read data from any JSON data source property,
                                 // including deeply nested objects / properties. mData can be given in a 
                                 // number of different ways which effect its behaviour: 
                                 // null - the sDefaultContent option will be used for the cell
                                 // (null by default, so you will need to specify the default
                                 // content you want - typically an empty string). This can be
                                 // useful on generated columns such as edit / delete action
                                 // columns.
                                 "sTitle": "Edit",
                                 "mData": null,
                                 "mRender": function (obj) {
                                     //  var userId = obj[0].toString();
                                     // alert(obj.DT_RowId);
                                     return '<a href="#" id="' + obj.DT_RowId + '" onclick="EditLogEvent(this)"  >Edit</a>';
                                     //   return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewParticularLogsInfo(this)"  >Edit</a>';
                                 }
                             },
            ],
            "aoColumnDefs": [{ "bVisible": false, "aTargets": [1, 6, 7, 9, 10] }],
            "fnDrawCallback": function (oSettings) {

                var pgr = $(oSettings.nTableWrapper).find('.dataTables_paginate');
                var scrbdy = $(oSettings.nTableWrapper).find('.dataTables_scrollBody');

                scrbdy.css('overflow-x', 'hidden !important');
                scrbdy.css('overflow-y', 'auto !important');

                if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
                    pgr.hide();
                } else {
                    pgr.show()
                }
            },
            "iDisplayLength": 10,
            "sDom": '<"clear">frtip',
            "bProcessing": true,
            "bServerSide": false,
            "bLengthChange": false,
            "bPaginate": true,
            "bDestroy": true,
            "bSort": false,
            "bInfo": true,
            "bFilter": false,
            "sAjaxSource": 'ParticularLogsDetails.aspx/BindLogEventsTable',
            "bJQueryUI": true,
            "bDeferRender": true,
            "sPaginationType": "full_numbers",
            "fnServerParams": function (aoData) {
                aoData.push(
                            { "name": "sortColumn", "value": sortColumn },
                            { "name": "isDescending", "value": isDescending },
                            { "name": "logId", "value": logId }
                );
            },
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({

                    "dataType": 'json',
                    "contentType": "application/json; charset=utf-8",
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success":
                            function (msg) {
                                var obj = jQuery.parseJSON(msg.d);
                                //    alert(msg.d);
                                fnCallback(obj);

                                //if (null == $('#LogEventsTable').DataTable()) {
                                //    alert("log events table is Null");

                                //}

                                var displayDataTable = $('#LogEventsTable').DataTable();
                                // var versionNo = $.fn.dataTable.version;
                                // alert(versionNo);
                                if (obj.loggedInUserRole == 2 || obj.isFrozen == true) {
                                    displayDataTable.columns([11]).visible(false);
                                    $('#btn-AddNewEventSecondOuterDiv').css('display', 'none');
                                    $('#btn-AddNewEventOuterDiv').css('display', 'none');
                                    $('#btn-AddNewEvent').css('display', 'none');
                                    $('#btn-LogEditSecondOuterDiv').css('display', 'none');
                                    $('#btn-LogEditOuterDiv').css('display', 'none');
                                    $('#btn-LogEdit').css('display', 'none');
                                } // end if (obj.loggedInUserRole == 2) 


                            },

                    beforeSend: function () {
                        $('.loader').show()
                    },
                    complete: function () {
                        $('.loader').hide()

                    }
                });
            }
        })
    }

Could someone please tell me how the aforementioned error can be resolved?

CS Lewis

All:

I believe the problem was that with jQuery DataTables, it is important that you populate the HTML declaration with tag, and it's corresponding header title rows like the following even though we might be programmatically specifying the Header title rows in the JavaScript:

                        <table id="aTable" class="table
table-striped">
                            <thead>
                                <tr>
                                    <th>Vehicle Reg. No.</th>
                                    <th>Date</th>
                                    <th>Driver Name</th>
                                    <th>Total Defects </th>
                                    <th>Open Defects</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-25

Comments

0 comments

From Dev

Why does using the ternary operator to return a string generate considerably different code from returning in an equivalent if/else block?

From Java

Related Related

Article