locked
Error - Uncaught TypeError: Cannot read property 'style' of undefined RRS feed

  • Question

  • User1979860870 posted

    Hi

    Uncaught TypeError: Cannot read property 'style' of undefined
        at _fnCalculateColumnWidths (jquery.dataTables.js:5586)
        at _fnInitialise (jquery.dataTables.js:4704)
        at loadedInit (jquery.dataTables.js:1295)
        at HTMLTableElement.<anonymous> (jquery.dataTables.js:1307)
        at Function.each (jquery-1.10.2.js:657)
        at init.each (jquery-1.10.2.js:266)
        at init.DataTable [as dataTable] (jquery.dataTables.js:869)
        at init.$.fn.DataTable (jquery.dataTables.js:15069)
        at HTMLDocument.<anonymous> (Employee.js:4)
        at fire (jquery-1.10.2.js:3048

    <body>
            <div class="row">
                <div class="col-sm-6">
                    <button type="button" id="addButton" class="btn btn-primary" onclick="addClick();">Add Employee</button>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <table id="tblEmployee" class="table table-bordered table-condensed table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Department</th>
                            </tr>
                        </thead>
                        <tbody class="tbody"></tbody>
                    </table>
                </div>
            </div>
    
            
            </div>
    
    </body>
    $(document).ready(function () {
        $("#delete-dialog").hide;
        $('#tblEmployee').DataTable({
            "pageLength": 10
        });
        loadData();
    });
    
    function loadData() {
        alert("hi");
        $.ajax({
            url: "http://localhost:40991/api/Employees/",
            type: "GET",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (result) {
                var html = '';
                $.each(result, function (key, item) {
                    html += '<tr>';
                    html += '<td>' + item.Id + '</td>';
                    html += '<td>' + item.Name + '</td>';
                    html += '<td><a href="#" onclick="return getbyID(' + item.Id + ')">Edit</a> | <a href="#" onclick="Delete(' + item.Id + ')">Delete</a></td>';
                    html += '</tr>';
                });
                $('.tbody').html(html);
            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        });
    }
    Below are the files in _Layout.ScHtml
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>SB Admin - Start Bootstrap Template</title>
        <!-- Bootstrap core CSS-->
        <link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <!-- Custom fonts for this template-->
        <link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
        <!-- Page level plugin CSS-->
        <link href="~/vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet" />
        <!-- Custom styles for this template-->
        <link href="~/css/sb-admin.css" rel="stylesheet" />
    
        <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js" type="text/javascript"></script>
        
        <script src="~/Scripts/bootstrap.js"></script>
        <script src="~/vendor/datatables/jquery.dataTables.js"></script>
    </head>

    Thanks

    Saturday, February 27, 2021 5:36 AM

All replies