Weird behavior of jqGrid row selection

Question

I have this very unusual behavior, Let me describe the problem.

The jqgrid has 14 records all together, at first it is set to rowNum:10, when from the drop down I select to display 50 rows all the records accommodate, but in Firefox 5 when I select the 11th row (Name as asd) it selects the 10th row as well. It behaves differently in IE8.

In IE8 it gives me the below error

Webpage error details

Message: 'className' is null or not an object
Line: 2496
Char: 4
Code: 0
URI: http://au1642163:10070/csm/view/include/js/jquery.jqGrid.min.js

Here is the image of IE8

enter image description here

My jqgrid code

var xml=client.responseText;
         var xmlDoc = $.parseXML(xml); 
         var $xml = $(xml);

         xml=xml.replace(/1/g, ""+productMap['1']);
         xml=xml.replace(/2/g, ""+productMap['2']);
$('#configDiv').empty();
            $('#configDiv').html(
                    '' +
                    '
');

            var grid = jQuery("#list1");
            var iconAlert;

            getColumnIndexByName = function (grid, columnName) {
                var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
                for (; i < l; i += 1) {
                    if (cm[i].name === columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            },
            grid = jQuery("#list1"),
            iconAlert = '';



            grid.jqGrid({

              datastr : xml,
              datatype: 'xmlstring',
              colNames:['cfgId','Name', 'Host','Operating System', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By','',''],
              colModel:[
                  {name:'cfgId',index:'cfgId', width:90, align:"left", hidden:true},
                  //{name:'updateDate',index:'updateDate', width:12, align:'center', formatter: oldConfigurationWarning },
                  {name:'cfgName',index:'cfgName', width:70, align:"left", formatter: 'showlink', formatoptions: {baseLinkUrl: '#'} },
                  {name:'hostname',index:'hostname', width:70, align:"left"},
                  {name:'osname',index:'osname', width:90, align:"left"},
                  {name:'cfgDesc',index:'cfgDesc', width:90, align:"left"},
                  {name:'productId',index:'productId', width:40, align:"left"},
                  {name:'cfgType',index:'cfgType', width:50, align:"left"},
                  {name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"left"},
                  {name:'emailAddress',index:'emailAddress', width:120, align:"left"},
                  {name:'absolutePath',index:'absolutePath', width:90, align:"left", hidden:true},
                  {name:'fileName',index:'fileName', width:90, align:"left", hidden:true}

              ],
              pager : '#gridpager',
              rowNum:10,
              rowList:[10,50,100],
              scrollOffset:0,
              height: 'auto',
              emptyrecords: 'No configurations loaded',
              autowidth:true,
              viewrecords: true,
              gridview: true,
              multiselect: true,
              xmlReader: {
                  root : "list",
                  row: "Response",
                  userdata: "userdata",
                  repeatitems: false
              },
              loadComplete: function () {
                    var count = grid.getGridParam();
                    var ts = grid[0];
                    if (ts.p.reccount === 0) {
                        grid.hide();
                        emptyMsgDiv.show();
                    } else {
                        grid.show();
                        emptyMsgDiv.hide();
                    }

                    //for showlink and icon alert having date difference more than 90 days
                    var iRow, row, trClasses, $cell,
                    icfgName = getColumnIndexByName(grid, 'cfgName'),
                    iupdateDate = getColumnIndexByName(grid, 'updateDate'),

                    mygrid = grid[0],
                    rows = mygrid.rows,
                    cRows = rows.length,
                    myLink = function (e) {
                        var $td = $(e.target).closest('td'),
                            text = $td.text(),
                            $tr = $td.closest('tr'),
                            rowid = $tr[0].id;
                            goToViewAllPage(rowid);
                    };

                for (iRow = 0; iRow < cRows; iRow += 1) {
                    row = rows[iRow]; // row.id is the rowid
                    trClasses = row.className.split(' ');
                    if ($.inArray('jqgrow', trClasses) > 0) {
                        // the row is a standard row (only if subGrid:true are used)

                        /*if ($(row.cells[iupdateDate]).text() === 'Science') {
                           $cell.prepend(iconAlert);
                        }*/
                        var cellvalue1,firstDate,secondDate;
                        $cell = $(row.cells[icfgName]);
                        cellvalue1=$(row.cells[iupdateDate]).text();
                        firstDate = new Date();
                        //console.info(cellvalue1+", "+cellvalue1.length);
                        //var cellvalue1="08-18-2011 11:49:01";
                        if(cellvalue1.length>25)
                        {
                            secondDate=new Date();
                            //secondDate = secondDate.substring(0, secondDate.length-3);

                            if(diffOf2Dates(firstDate,secondDate,true)>=expireCondition)
                            {
                                $cell.prepend(iconAlert);
                            }
                            $cell.click(myLink);
                        }
                        else
                        {

                            secondDate = cellvalue1.substring(0, cellvalue1.length-6);
                            if(diffOf2Dates(firstDate,secondDate,false)>=expireCondition)
                            {
                                $cell.prepend(iconAlert);
                            }
                            $cell.click(myLink);
                        }



                    }
                }
                },
              onSelectRow: function(id,status){
                  //var rowData = jQuery(this).getRowData(id); 
                  }


            });
            grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false});
            jQuery("#m1").click( function() {
                var s;
                s = grid.jqGrid('getGridParam','selarrrow');
                alert(s);
            });
            var myGrid = $("#list1");
            $("#cb_"+myGrid[0].id).hide();
            // place div with empty message insde of bdiv
            emptyMsgDiv.insertAfter(grid.parent());
     }

};

My XML response



704
IIR Windows1
asda
Production
csmclientIIR.xml
../webapps/csm/files//12345/csmclientIIR.xml
asimon@ABC.com
12345
IIR
2011-09-07 10:55:31.0 IST
2011-09-07 10:55:31.0 IST
1
1
Windows_NT


717
ilmwin
asd
Production
csmclientin164302.xml
../webapps/csm/files//12345/csmclientin164302.xml
asimon@ABC.com
12345
IN164302
2011-09-07 16:45:03.0 IST
2011-09-07 16:45:03.0 IST
1
2
Windows_NT


718
ilmwin1
asdasd
Production
csmclientin164302.xml
../webapps/csm/files//12345/csmclientin164302.xml
asimon@ABC.com
12345
IN164302
2011-09-07 16:46:35.0 IST
2011-09-08 10:19:26.0 IST
2
2
Windows_NT


723
ilm linux
asd
Production
csmclientestilo.xml
../webapps/csm/files//12345/csmclientestilo.xml
asimon@ABC.com
12345
estilo
2011-09-08 14:20:09.0 IST
2011-09-08 14:20:09.0 IST
1
2
Linux


696
ILMwin1
asfas
Production
csmclientin164302.xml
../webapps/csm/files//12345/csmclientin164302.xml
mkuamrln@ABC.com
12345
IN164302
2011-09-06 16:15:06.0 IST
2011-09-06 16:15:06.0 IST
1
2
Windows_NT


697
ILMlin
dgds
Production
csmclientestilo.xml
../webapps/csm/files//12345/csmclientestilo.xml
mkuamrln@ABC.com
12345
estilo
2011-09-06 16:20:58.0 IST
2011-09-06 16:20:58.0 IST
1
2
Linux


706
ILM linux
wwrwrwr
Production
csmclientestilo.xml
../webapps/csm/files//12345/csmclientestilo.xml
mkuamrln@ABC.com
12345
estilo
2011-09-07 14:22:03.0 IST
2011-09-07 14:22:03.0 IST
1
2
Linux


698
test1
asfta
Production
csmclientgcslpar1.xml
../webapps/csm/files//12345/csmclientgcslpar1.xml
asimon@ABC.com
12345
gcslpar1
2011-09-06 17:14:31.0 IST
2011-09-08 10:20:15.0 IST
2
1
AIX


699
test2
adAD
Production
csmclientgcslpar2.xml
../webapps/csm/files//12345/csmclientgcslpar2.xml
mkuamrln@ABC.com
12345
gcslpar2
2011-09-06 17:14:46.0 IST
2011-09-06 17:14:46.0 IST
1
1
AIX


702
IIR Windows
asdad
Production
csmclientIIR.xml
../webapps/csm/files//12345/csmclientIIR.xml
asimon@ABC.com
12345
IIR
2011-09-07 10:47:10.0 IST
2011-09-07 10:47:10.0 IST
1
1
Windows_NT


687
asd
a
Production
csmclientestilo.xml
../webapps/csm/files//12345/csmclientestilo.xml
asimon@ABC.com
12345
estilo
2011-09-06 13:28:28.0 IST
2011-09-06 13:28:28.0 IST
1
1
Linux


688
asd1
asd
Production
csmclientbuckeye.ABC.com.xml
../webapps/csm/files//12345/csmclientbuckeye.ABC.com.xml
asimon@ABC.com
12345
buckeye.ABC.com
2011-09-06 13:30:10.0 IST
2011-09-06 13:30:10.0 IST
1
1
Linux


701
NULL
asda
Production
csmclientin164302.xml
../webapps/csm/files//12345/csmclientin164302.xml
asimon@ABC.com
12345
IN164302
2011-09-07 10:43:19.0 IST
2011-09-08 16:44:00.0 IST
2
2
Windows_NT


705
Sunos config
asdasd
Production
csmclientzenvo.xml
../webapps/csm/files//12345/csmclientzenvo.xml
asimon@ABC.com
12345
zenvo
2011-09-07 11:22:56.0 IST
2011-09-07 11:22:56.0 IST
1
1
SunOS

Oleg · Accepted Answer

You should test yourself the code which you post. You should carefully read the question with the answer. If you don't want to have the described problems you should set your questions in another way. Nevertheless I will answer on your current question.

The current code contains many undefined functions and variabls. Moreover it has small syntax error. One from the most important is

var grid = jQuery("#list1");
var iconAlert;

getColumnIndexByName = function (grid, columnName) {
    ...
},
grid = jQuery("#list1"),
iconAlert = '



You should not define the same variables twice and in any way sou should replace ';' at the ent of var iconAlert; to comma to define the variable getColumnIndexByName as a function.

The code at the beginning (xml=xml.replace(/1/g, ""+productMap['1']);) I can't understand at all. Why you need to do strange modifications of XML as text if you has $xml and can use jQuery to select and modify any XML element.

If you would continue to use so dirty code you can has more serious problems. I recommend you always verify your code in JSLint. You can include JSLint options for example

/*global $, jQuery */
/*jslint devel: true, browser: true, vars: true, white: true, plusplus: true*/


After all the work with preparing the test example only the resulting code don't have the problems which you described.

Weird behavior of jqGrid row selection

Answers (1)

Related Questions