JavaScript runtime error: cannot call methods on jtable prior to initialization; attempted to call method 'load'

Question

i am using jtable when i search records a i am getting this error JavaScript runtime error: cannot call methods on jtable prior to initialization; attempted to call method 'load' i am getting this error only in IE 9

            var Visits = new Array();
            var Procedures = new Array();
            var Statuses = new Array();
            var CoreLabStatuses = new Array();

            $("#LstSelectedVisit option").each(function (index, ele) {
                Visits.push($(this).val());
            });

            $("#LstSelectedProcedure option").each(function (index, ele) {
                Procedures.push($(this).val());
            });

            $("#LstSelectedStatus option").each(function (index, ele) {
                Statuses.push($(this).val());
            });

            $("#LstSelectedCoreLabStatus option").each(function (index, ele) {
                CoreLabStatuses.push($(this).val());
            });
            /* ### Getting selected Visits, Procedures and Status(End) ### */
            //calling server side to blank temp data function

            $.ajax({
                url: '@Url.Action("BlankTempData")',
            type: 'POST',
            //contentType: 'application/json',
            //data: model.serialize(),
            success: function (result) {
                $('#CaseGridContainer').jtable('load', {
                    Trial: $('#ddlTrial').val(),
                    Received_Date: $('#txtReceivedDate').val(),
                    Site_Id: $('#ddlSite').val(),
                    Study_Date: $('#txtStudyDate').val(),
                    ReceivedDateStart: $('#txtReceivedDateStart').val(),
                    ReceivedDateEnd: $('#txtReceivedDateEnd').val(),
                    StudyDateStart: $('#txtStudyDateStart').val(),
                    StudyDateEnd: $('#txtStudyDateEnd').val(),
                    Subject_id: $('#txtSubjectID').val(),
                    Job_id: $('#txtJobID').val(),
                    MDDX_id: $('#txtMDDXID').val(),
                    Patient_Name_tag: $('#txtPatientsNameTAG').val(),
                    CoreLab: $('#ddlCoreLab').val(),
                    lstVisit: Visits.join(),
                    lstProcedure: Procedures.join(),
                    lstStatus: Statuses.join(),
                    lstCoreLabStatus: CoreLabStatuses.join()
                });
            }
        });

Answer 1

Basically this problem occurs because jtable is not initialized. First, make sure you are using latest jtable api (v2.4.0) if you aren't already. Technically you could fix this just by first initializing with something like following

$('#CaseGridContainer').jtable().jtable('load'

However, you need to first find out why jtable ran into that situation.

Assuming that you are having this problem with latest version of jtable API I'd fix this by not loading and setting jtable in same go. i.e. first set jtable definition and then load jtable in a different statement as follows.

$('#PersonTableContainer').jtable({
            title: 'Table of people',
            actions: {
                listAction: '/GettingStarted/PersonList',
                createAction: '/GettingStarted/CreatePerson',
                updateAction: '/GettingStarted/UpdatePerson',
                deleteAction: '/GettingStarted/DeletePerson'
            },
            fields: {
                PersonId: {
                    key: true,
                    list: false
                },
                Name: {
                    title: 'Author Name',
                    width: '40%'
                },
                Age: {
                    title: 'Age',
                    width: '20%'
                },
                RecordDate: {
                    title: 'Record date',
                    width: '30%',
                    type: 'date',
                    create: false,
                    edit: false
                }
            }
        });

$('#PersonTableContainer').jtable('load');

Make sure that both above commands are in same function block. So in your case it should be like follows.

function (result) {
//set jtable
//load jtable
}

Then if issue is still occurring in IE9 browser then put some sleep for IE9 case between jtable set and load method.

Answer 2

In your copy of jtable seeks closeChildTable function and replace it with this:

    closeChildTable: function ($row, closed) {
        var self = this;

        var $childRowColumn = this.getChildRow($row).children('td');
        var $childTable = $childRowColumn.data('childTable');
        if (!$childTable) {
            if (closed) {
                closed();
            }
            return;
        }
        /**
         * We verified that this really initialized, because by using
         * openChildRow / closeChildRow the markup is generated but this
         * does not necessarily represent the existence of an instance
         */
        if($childTable.data('hik-jtable') === undefined){
            if (closed) {
                closed();
            }
            return;
        }

        $childRowColumn.data('childTable', null);
        $childTable.slideUp('fast', function () {
            $childTable.jtable('destroy');
            $childTable.remove();
            self.closeChildRow($row);
            if (closed) {
                closed();
            }
        });
    },

Answer 3

Just before trying to initialize the jtable, make sure your jtable's id is right and that the div where the jtable is going to be loaded exists and its name is the same as the id used to load the jtable.

This error happens to me very often when I forget taking care of any of the above situations.

Btw, you didn't paste your html where the jtable's id div is going to be loaded, so I asume the error is that easy.

Answer 4

• alternatively the jQuery selector might be incorrect. eg not #personTable but #personTableContainer

• my case was, there were 2 elements with the same selector. eg <div id="personTable">table 1</div> <div id="personTable">table 2</div>