Possible jQuery/jqGrid problem in IE8

Question

I have a grid constructed with jqGrid, that uses the search toolbar, a custom formatter to insert radio boxes and a loadComplete handler. Everything works fine in FF but when I go to IE8 (shame!!!) the screen would freeze with the data loaded and the Loading... box on the screen. I can do nothing on the screen.

Here is my code:

function loadCompleteHandler(){
 jQuery("#listTable").jqGrid('setGridHeight', Math.min(300,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
}

 function radio(value, options, rowObject){
  var radio = '<input type="radio" value=' + value + ' name="radioid" ondblclick="inDetail();"/>';
  return radio;
 }

 function statusSelect(){
  #set($select = ":$l10n.lbl_123")
  #foreach($se in $status_list) 
   #set($select = $select + ";$se.getValue():$se.getValue()") 
  #end  
  return "$select";
 }

 jQuery(function(){  
  jQuery("#listTable").jqGrid({
     url: '$content.getURI("/servlet/ajax/MyServlet.json")' + '?loggedUserId=$loggedUserId&pageNo=0&locale=' + '$l10n.getLocale().toString()',
     datatype: 'json',
     mtype: 'POST',
     colNames:['','$l10n.lbl_copy','$l10n.lbl_476','$l10n.lbl_380', '$l10n.lbl_2547<br/>$l10n.lbl_3768','$l10n.lbl_owner','$l10n.lbl_256 $l10n.lbl_92','$l10n.lbl_1558<br>$l10n.lbl_185','$l10n.lbl_348'],
     colModel :[ 
        {name:'column1', index:'column1', width:'3%', search:false, align:'center', formatter: radio, editable:false, sortable: false, resizable:false},
        {name:'column2', index:'column2', width:'6%', search:false, align:'center', formatter:'checkbox', sortable: false, resizable:false}, 
        {name:'column3', index:'column3', width:'12%', sortable: false, stype:'select', editoptions:{value: statusSelect()}, resizable:false}, 
        {name:'column4', index:'column4', width:'17%', search:false, sortable: false, resizable:false}, 
        {name:'column5', index:'column5', width:'10%', search:false, sortable: false, resizable:false}, 
        {name:'column6', index:'column6', width:'13%', sortable: false, resizable:false}, 
        {name:'column7', index:'column7', width:'13%', sortable: false, resizable:false},
     {name:'column8', index:'column8', width:'12%', sortable: false, resizable:false},
     {name:'column9', index:'column9', width:'14%', sortable: false, resizable:false}
      ],
     width:'768',
  height: 300,
  loadonce:true,
  pager: '#pagerDiv',
  gridview: true,
  rowNum:15,
  rowTotal: 500,
     sortorder: 'desc',
     viewrecords: true,
  loadComplete: loadCompleteHandler
    }); 
 });

 jQuery(function(){
  jQuery("#listTable").jqGrid('filterToolbar',{
       stringResult: true, 
       searchOnEnter: false, 
       defaultSearch:'cn'}); /* search strategy meaning: contains */
 }); 

I am using Velocity, jQuery 1.4.2. IE gives an invalid argument error in the jQuery library at this line:

 if ( set ) {
   style[ name ] = value;
  }

Maybe the problem is with jQuery in IE8, I don't know....

EDIT : more specific data added

I am using jqGrid 3.8.2. The statusSelect after Velocity has processed it looks like this:

function statusSelect(){
     return ":All;status1:status1;status2:status2";
}

I think there is no problem with the JSON data transfer since the grid previously worked in IE8 when there was no setGridHeight, loadComplete handler. I have also done some minor modifications which I can only partially recount (i.e. column resize disabled). For testing purposes here is a JSON object:

    {
    "page":"1",
    "records":2,
    "rows":[{"id":150,"cell":[150,false,"status1","columnData4","columndata5","columndata6","columndata7","Test1\u003cbr/\u003e\u003cspan style\u003d\u0027float:right;\u0027\u003e10.12.2010\u003c/span\u003e","columnData"]},
      {"id":157,"cell":[157,false,"status2","columnData41","columndata51","columnData61","columnData71","Test2\u003cbr/\u003e\u003cspan style\u003d\u0027float:right;\u0027\u003e22.12.2010\u003c/span\u003e","columnData"]}],
    "total":50.0
    }

I don't know how to use the total parameter, so I just declared an arbitrary value (50D). The inDetail function just submits the form (I am using Apache Turbine parameter here):

    function inDetail(){
        document.forms['myForm'].eventSubmit_doAction.value = 'doSomeAction';
        document.forms['myForm'].submit();
    }

Answer 1

I could not reproduce the problem which you describe. How you can see here the grid can be loaded without any problem in IE. It looks not fine because of missing CSSs, but all works in general. So I suppose you have problem in the code which you not publish here. I recommend you to verify your HTML page in http://validator.w3.org/, your test JSON results in http://www.jsonlint.com/ and JavaScript code in http://www.jslint.com/.

I would only not recommend you to use radio variable inside of the function with the same name radio. Better to choose another name. It is better also to add 10 as the second parameter of the parseInt function. In my tests your original code worked also without the corresponding code changes.