MethodName is not a function in Javascript

Question

In the following code in the loadComplete method it gives me this error:

this.getColumnIndexByName is not a function

dataGrid.prototype = {
    display: function() {
        var html = [];
        var check = 0;
        html.push("<table id='" + this.id + "" + "'class='table'>\n</table>");
        $('body').append(html.join(""));
        $("#" + this.id).jqGrid({
            url: "index.jsp",
            styleUI: 'Bootstrap',
            datatype: "local",
            data: this.data,
            colModel: this.getColModels(this.data[0]),
            viewrecords: true,
            width: 1300,
            height: 250,
            rowNum: 50,


            loadComplete: function() {
                var iCol = this.getColumnIndexByName('Enable');
                var rows = $("#" + this.id).jqGrid('getGridParam', 'records');
                var i;
                for (i = 0; i < rows; i++) {
                    $(rows[i].cells[iCol]).click(function(e) {
                        var id = $(e.target).closest('tr')[0].id,
                            isChecked = $(e.target).is(':checked');
                        alert("checked:" + isChecked);
                        //you can also get the values of the row data
                        alert('clicked on the checkbox in the row with id=' + id + '\nNow the checkbox is ' + (isChecked ? 'checked' : 'not checked'));
                    });
                }
            }

        });
    },
    getColNames: function(data) {
        var keys = [];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                keys.push(key);
            }
        }
        return keys;
    },
    getColModels: function(data) {
        var colNames = this.getColNames(data);
        var colModelsArray = [];
        var str2;
        for (var i = 0; i < colNames.length; i++) {
            var str1;

            str1 = {
                name: colNames[i],
                index: colNames[i],
            };
            colModelsArray.push(str1);
        }
        str2 = {
            name: 'Enable',
            index: 'Enable',
        };
        colModelsArray.push(str2);
        return colModelsArray;
    },
    getColumnIndexByName: function(columnName) {
        var cm = $("#" + this.id).jqGrid('getGridParam', 'colModel'),
            i, l;
        for (i = 0, l = cm.length; i < l; i += 1) {
            if (cm[i].name === columnName) {
                return i;
            }
        }
        return -1;
    },
};

score 0 · Accepted Answer · answered Apr 20 '16 at 09:15

You need to call the function on the correct this

dataGrid.prototype = {
    // ...
    display : function() {
        var me = this; // Keep a reference to the dataGrid `this`
        // ...
        $("#" + me.id).jqGrid({
            // ...
            loadComplete: function () {
                var iCol = me.getColumnIndexByName('Enable');

score 0 · Answer 2 · edited May 23 '17 at 12:16

Because this inside loadComplete is not referencing the object, this behaviour is called closures

See this others interesting articles Stackoverflow self = this

You must save the this reference to another variable and use it:

dataGrid.prototype = {

        display : function() {

            var self = this; // Save this reference

            var html = [];
            var check = 0;
            html.push("<table id='"+this.id+"" + "'class='table'>\n</table>");
            $('body').append(html.join(""));
            $("#" + this.id).jqGrid({
                url : "index.jsp",
                styleUI : 'Bootstrap',
                datatype : "local",
                data : this.data,
                colModel : this.getColModels(this.data[0]),
                viewrecords : true,
                width : 1300,
                height : 250,
                rowNum : 50,


                 loadComplete: function () {
                        //use selft reference
                        var iCol = self.getColumnIndexByName('Enable'); 
                        var rows = $("#" + self.id).jqGrid('getGridParam', 'records');
                        var i;
                        for (i = 0; i < rows; i ++) {
                            $(rows[i].cells[iCol]).click(function (e) {
                                var id = $(e.target).closest('tr')[0].id, isChecked = $(e.target).is(':checked');
                                alert("checked:" + isChecked);
                                //you can also get the values of the row data
                                alert('clicked on the checkbox in the row with id=' + id + '\nNow the checkbox is ' + (isChecked ? 'checked' : 'not checked'));
                            });
                        }
                    }

            });
        },

        getColNames : function(data) {
            var keys = [];
            for ( var key in data) {
                if (data.hasOwnProperty(key)) {
                    keys.push(key);
                }
            }
            return keys;
        },

        getColModels : function(data) {
            var colNames = this.getColNames(data);
            var colModelsArray = [];
            var str2;
            for (var i = 0; i < colNames.length; i++) {
                var str1;

                str1 = {
                    name : colNames[i],
                    index : colNames[i],
                };
                colModelsArray.push(str1);
            }
            str2 = {
                    name : 'Enable',
                    index : 'Enable',
                }; 
            colModelsArray.push(str2);
            return colModelsArray;
        },

         getColumnIndexByName : function (columnName) {
            var cm = $("#" + this.id).jqGrid('getGridParam', 'colModel'), i, l;
            for (i = 0, l = cm.length; i < l; i += 1) {
                if (cm[i].name === columnName) {
                    return i; 
                }
            }
            return -1;
        },



};

MethodName is not a function in Javascript

2 Answers2