0x800a138f - JavaScript runtime error: Unable to get property 'style' of undefined or null reference

0x800a138f - JavaScript runtime error: Unable to get property 'style' of undefined or null reference

kumarmca.uppkumarmca.upp Posts: 7Questions: 1Answers: 0

error js file
//Unhandled exception at line 62, column 196 in
//jquery.dataTables.min.js

$('#btnSQLSubmit').click(function () {

    //var startdate = $("#startdatepicker").datepicker().val();
    //var enddate = $("#enddatepicker").datepicker().val();
    var startdate = startdateNullcheck();
    //alert(startdate);
    var enddate = enddateNullcheck();
    //alert(enddate);
    //var errortype = $("#ChangePaymentScheme").val();
    var errortype = $("#selectReport").val();
    $("#reportName").hide();

    $.ajax({
        type: "POST",
        dataType: "json",
        data: { startdate: startdate, enddate: enddate, errortype: errortype },
        url: "/DataTable/GetSQLregistrationErrorData",
        success: function (Json) {
            $('#div_datatable').show();
            $('#table_id').show();
            //debugger;
            //alert(Json);
            //json result nt eq check here
            var csv = Json;
            if (Json != "null" && Json.length > 0 && Json != '[]') {

                var res = JSON.parse(Json);
                var jsonRes = '{"Header":' + Json + '}';
                var data1 = JSON.parse(jsonRes);
                //alert(data1.Header.length);
                var objModel = Object.keys(data1.Header[0]);
                var objmod = [];
                for (i = 0; i < objModel.length; i++) {
                    objmod.push(objModel[i])
                }
                var aryColTableChecked = objmod;
                var aryJSONColTable = [];
                var aryJSONCollumn = [];

                var datafinal;
                for (var i = 0; i < aryColTableChecked.length; i++) {
                    aryJSONColTable.push({
                        "sTitle": aryColTableChecked[i],
                        "aTargets": [i]
                    });
                    aryJSONCollumn.push({
                        "data": aryColTableChecked[i]
                    });
                }

                var datatableVariable = $('#table_id').DataTable({
                    "destroy": true,
                    colReorder: true,
                    lengthMenu: [
                                [10, 25, 50],
                                ['10 rows', '25 rows', '50 rows']//, 'Show all'
                    ],
                    paging: true,

                    searching: true,
                    "data": res,
                    "aoColumnDefs": aryJSONColTable,
                    "aoColumns": aryJSONCollumn,
                    dom: 'Bfrtip',
                    dom: 'lBfrtip',
                    buttons: [{
                        extend: 'csv',
                        text: 'To CSV'
                    },
                                //{
                                //    extend: 'copy',
                                //    text: 'To clipboard'
                                //},
                                {
                                    extend: 'excel',
                                    text: 'To Excel'
                                }, ]

                });

                $("#reportName").show();
                $("#reportName").html($("#selectReport").val() + " Error-Report<br>" + data1.Header.length + " Error(s) From " + startdate + " To " + enddate);
            }

            else {
                //$('#table_id').DataTable.hide();
                $('#div_datatable').hide();

                $("#reportName").show();
                //alert("No data found for the selected period");
                $("#reportName").html("No data found for the selected period");

            }


        }
    }); $('#table_id').hide();
});

Answers

  • kumarmca.uppkumarmca.upp Posts: 7Questions: 1Answers: 0

    Dear gurus,

    please help on the above error "Unable to get property 'style' of undefined or null reference"

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736
    edited April 2017

    Unable to get property 'style' of undefined or null reference

    Generally this means your html table has less columns than you have configured in Datatables. More info is needed to help. Please see this tech note:
    https://datatables.net/manual/tech-notes/10

    Also you have the dom defined twice:

                        dom: 'Bfrtip',
                        dom: 'lBfrtip',
    

    Probably only need it once.

    Kevin

  • kumarmca.uppkumarmca.upp Posts: 7Questions: 1Answers: 0

    im dynamically loading data, results is ok. wen i select another option its showing sblove mentioned error

  • kumarmca.uppkumarmca.upp Posts: 7Questions: 1Answers: 0

    if i remove
    dom: 'Bfrtip',
    dom: 'lBfrtip',

    the show entities button not showing...

    also someone help me on the style issue

  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin

    the show entities button not showing...

    Then you removed the wrong one. Keep the second one :smile:.

    also someone help me on the style issue

    As Kevin said its likely due to a mismatch between the HTML and the Javascript. You'd need to give us a link to the page so we can see and understand what is going wrong here if you'd like some help with it.

    Allan

  • rabjenrabjen Posts: 1Questions: 0Answers: 0

    I know this is old but, For the style issue try using
    $('#table_id).DataTable().clear().destroy();
    $("#table_id").empty();
    before you create the table.
    e.g.
    success: function (Json) {
    //console.log($.fn.dataTable.isDataTable("#table_id"));
    //console.log('ID : ' + $('#table_id').html());
    if ($.fn.dataTable.isDataTable("#table_id"))
    {
    //console.log("xxxxxx");
    $('#table_id).DataTable().clear().destroy();
    $("#table_id").empty();
    }
    //console.log($.fn.dataTable.isDataTable("#table_id"));
    //console.log('ID2 : ' + $('#table_id').html());

  • bluelakebluelake Posts: 1Questions: 0Answers: 0
    edited October 2020

    Likewise - very old post but the "0x800a138f - JavaScript runtime error: Unable to get property 'style' of undefined or null reference" error searches kept leading me here. After upgrading to Jquery 3.4.1, resizing a window containing a datatable was generating this error. My table structure was fine. I was using a "scrollX": true parameter in my datatable init - removing that param resolved my issue.

    The actual error was happening when datatables.js was trying to execute function _fnPageChange even though I also have paging: false in my init.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    If you could show us a page that demonstrates that error, we'd be happy to look into it. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • williamholdingwilliamholding Posts: 1Questions: 0Answers: 0

    This issue arises when js/jquery is not able to refer to the element. It is because at the time of rendering the page(view), object is null or undefined - which means that there is no instance of a class in the variable. If you are getting data for object from an async call(api's), these kind of problems will arise. So you should always check the object whether it is null or undefined then if it is not, you can access its properties.

    The standard way to catch null and undefined simultaneously is this:

    if (variable == null) {
    // your code here.
    }

    Because null == undefined is true, the above code will catch both null and undefined.

    Also you can write equivalent to more explicit but less concise:

    if (variable === undefined variable === null) {
    // your code here.
    }

    This should work for any variable that is either undeclared or declared and explicitly set to null or undefined.

    In most cases this error is related to getElementById(). So getting a value from an input could look like this:

    var value = document.getElementById("frm_new_user_request").value

    Also you can use some JavaScript framework, e.g. jQuery, which simplifies operations with DOM (Document Object Model) and also hides differences between various browsers from you.

    Getting a value from an input using jQuery would look like this:

    input with ID "element": var value = $("#element).value
    input with class "element": var value = $(".element).value

Sign In or Register to comment.