jQuery Grid Plugin - jqGrid

i just got started using jqGrid for a new project i am working on. implemented a grid which works fine in firefox and IE7, but the data (json format) does not load in Chrome, safari and IE8 initially. i can only get the data to load by using the ajax filter which i believe triggers a grid reload. i tried to manually reload the grid with no luck. below are my code, appreciate if anyone can give me some pointer on how to trouble shoot this and how to trouble shoot any jqGrid issue during developement. 

thanks in advance!

russell

code:

HTML:

<div class="h">Filter By:</div>

<div>

Company<br />

<input type="text" id="search_company" onkeydown="doSearch(arguments[0]||event)" />

</div>

<div>

Name<br>

<input type="text" id="search_name" onkeydown="doSearch(arguments[0]||event)" />

</div>

 

<table id="list"></table> 

<div id="pager" style="height:60px;"></div>

 

js code:

<script type="text/javascript">

$(function(){ 

  $("#list").jqGrid({

    url:'/SAP/cms/webservices/speakers.cfm?ws=1&action=loadGrid',

editurl: '/SAP/cms/webservices/speakers.cfm?ws=1&action=crud',

    datatype: 'json',

    mtype: 'GET',

    colNames:['speaker id','First Name','Last Name','Title','Company','Type'],

    colModel :[ 

      {name:'ispeakerid', index:'ispeakerid', width:90}, 

      {name:'firstname', index:'firstname', width:150,editable: true},

  {name:'lastname', index:'lastname', width:150,editable: true},

  {name:'title', index:'title', width:150,editable: true},

  {name:'company', index:'company', width:150,editable: true},

  {name:'type', index:'type', width:150,editable: true}

    ],

    pager: '#pager',

    rowNum:10,

    rowList:[10,20,30],

    sortname: 'lastname',

    sortorder: 'asc',

    viewrecords: true,

    caption: 'speakers',

multiselect: true

  }).navGrid('#pager',{view:true, del:false, edit:true,add:true,del:true}, 

{closeAfterEdit : true}, // use default settings for edit

{closeAfterAdd : true}, // use default settings for add

{},  // delete instead that del:false we need this

{multipleSearch : true}, // enable the advanced searching

{closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/

); 

}); 

 

var timeoutHnd;

var flAuto = true;

 

function doSearch(ev){

if(!flAuto)

return;

// var elem = ev.target||ev.srcElement;

if(timeoutHnd)

clearTimeout(timeoutHnd)

timeoutHnd = setTimeout(gridReload,500)

}

 

function gridReload(){

var company = jQuery("#search_company").val();

var name = jQuery("#search_name").val();

jQuery("#list").jqGrid('setGridParam',{url:"/SAP/cms/webservices/speakers.cfm?ws=1&company="+company+"&name="+name,page:1}).trigger("reloadGrid");

}

 

</script>

 

my josn response:

    { 

      "total": "38", 

      "page": "1", 

      "records": "376",

      "rows" : [

 

 

        {"id" :"79393", "cell" :[

                                                    "79393", 

                                                    "xxx", 

                                                    "xxx", 

                                                    "VP and CIO", 

                                                    "xxx Energy", 

                                                    "Customer - domestic"]}

        , 

      ]

    }