Question

I have used jqgrid for a while. I am getting an error when I select a row:

> Uncaught TypeError: Cannot call method 'indexOf' of undefined
> jquery.jqGrid.src.js:2465 $.jgrid.extend.setSelection
> jquery.jqGrid.src.js:2465 jQuery.extend.each jquery-1.7.1.js:658
> jQuery.fn.jQuery.each jquery-1.7.1.js:271 $.jgrid.extend.setSelection
> jquery.jqGrid.src.js:2460 $.fn.jqGrid jquery.jqGrid.src.js:587
> $.fn.jqGrid.each.$.before.click.bind.ts.p.datatype
> jquery.jqGrid.src.js:2235 jQuery.event.dispatch jquery-1.7.1.js:3256
> jQuery.event.add.elemData.handle.eventHandle

my grid definition is here:

var sql4 = 'select id_num, est_number, customer, product, rev, w, l, fw, fl, expr1009, status, comments from schema.table where customer = "' + customer + '" and est_number = "' + est_num + '"';
$("#the_table").jqGrid({
    url:'thescript.php?sql=' + sql4,
    height: 300,
    shrinkToFit: true,
    width: 650,
    datatype: 'xml',
    mtype: 'POST',
    colNames:["ID","Estimate","Customer","Product","Rev","W","L","FW","FL","Expr1009","Status","Comments"],
    colModel:[
        {name:"id_num",index:"id_num",width:"10"},
        {name:"est_number",index:"est_number",width:"10"},
        {name:"customer",index:"customer",width:"10"},
        {name:"product",index:"product",width:"10"},
        {name:"rev",index:"rev",width:"10"},
        {name:"w",index:"w",width:"10"},
        {name:"l",index:"l",width:"10"},
        {name:"fw",index:"fw",width:"10"},
        {name:"fl",index:"fl",width:"10"},
        {name:"expr1009",index:"expr1009",width:"10"},
        {name:"status",index:"status",width:"10"},
        {name:"comments",index:"comments",width:"10"}
    ],
    rowNum:10000,
    sortname: 'id_num',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    caption: '',
    ondblClickRow: function(id){
        //do some stuff here
    }
})
.jqGrid('filterToolbar')
.trigger('reloadGrid');

}

I cannot figure out what the problem is, as it seems the grid works fine otherwise.

I have noticed that in the following jqgrid function, the id = 1 for ever row (this info is contained in the variable pt.

setSelection : function(selection,onsr) {
    return this.each(function(){
        var $t = this, stat,pt, ner, ia, tpsr;
        if(selection === undefined) { return; }
        onsr = onsr === false ? false : true;
        pt=$t.rows.namedItem(selection+"");

The next line is where the error occurs. The variable pt has 4 nodes that all have id: 1.

if(!pt || pt.className.indexOf( 'ui-state-disabled' ) > -1 ) { return; }

** Amswer **

I added the key:true option the the id_num field in the ColModel. Each row of the grid had the SAME ID, so it was causing a problem. I think is error happens most often when you do not have unique IDs. in your grid.

Answer 1

I think that you should use encodeURIComponent in any way:

url: 'thescript.php?sql=' + encodeURIComponent(sql4)

instead of

url: 'thescript.php?sql=' + sql4

Probably you should send sql parameter not as the part of URL, but inside of POST data. In the case you should use

url: 'thescript.php',
postData: {
    sql: function () {
        return 'select id_num, est_number, customer, product, rev, w, l, fw, fl,' +
            ' expr1009, status, comments from schema.table where customer = "' +
            customer + '" and est_number = "' + est_num + '"';
    }
}

UPDATED: The error will be in the lines of code of setSelection. So pt.className is undefined. It’s very strange, but you can validate that you have no id duplication in the grid.