Why won't jqGrid won't populate initially in Chrome

Posted by Maxm007 on Stack Overflow See other posts from Stack Overflow or by Maxm007
Published on 2010-04-16T20:50:48Z Indexed on 2010/04/16 20:53 UTC
Read the original article Hit count: 428

Filed under:
|

Hi,

I've got a web page with a jqGrid that uses am xmlreader to populate itself with data that is spat out by a RoR service. The page loads fine in firefox and safari. In Chrome however I get a blank grid. Only when I change the sort order by clicking on the columns does it populate.

<html> 
<head> 
    <title>LocalFx</title> 
    <link href="/stylesheets/main.css?1271423251" media="screen" rel="stylesheet" type="text/css" /> 


    <link href="/stylesheets/redmond/jquery-ui-1.8.custom.css?1271404544" media="screen" rel="stylesheet" type="text/css" /> 
    <link href="/stylesheets/ui.jqgrid.css?1265561560" media="screen" rel="stylesheet" type="text/css" /> 
    <script src="/javascripts/jquery-1.3.2.min.js?1259426008" type="text/javascript"></script> 
    <script src="/javascripts/i18n/grid.locale-en.js?1266140090" type="text/javascript"></script> 
    <script src="/javascripts/jquery.jqGrid.min.js?1271437772" type="text/javascript"></script> 



    <script type="text/javascript"> 

        jQuery().ready(function() {
            jQuery("#list").jqGrid({
                xmlReader: {
                    root:"contracts",
                    row:"contract",
                    repeatitems:false,
                    id:"id"
                },
                jsonReader: {
                    repeatitems:false,
                    root:"contracts"
                },
                datatype: 'xml',
                url:'http://localhost:3000/contracts/index/all.xml',
                mtype: 'GET',
                colNames:['User','B/S',  'Currency', 'Amount', 'Rate'],
                colModel :[
                    {name:'user', index:'username', width:100 , xmlmap:'user>username'} ,
                    {name:'side', index:'side', width:100 , xmlmap:'side'} ,
                    {name:'currency', index:'ccy', width:100 , xmlmap:'currency>ccy'} ,
                    {name:'amount', index:'amount', width:100 , xmlmap:'amount'},
                    {name:'rate', index:'rate', width:100 , xmlmap:'exchange-rate>rate'}
                ],
                pager: jQuery('#pager'),
                caption: 'Contracts',
                sortname: 'side',
                sortorder: "asc",
                viewrecords:true,

                rowNum:10,
                rowList:[10,20,30]
            });
            $("#list").trigger("reloadGrid")
        });
    </script> 


</head> 
<body> 

<table id="list" align="center" class="scroll"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 

</body> 
</html>

This is the xml:

<contracts type="array"> 
  <contract> 
    <amount type="float">1000.0</amount> 
    <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
    <currency-id type="integer">488525179</currency-id> 
    <id type="integer">18277852</id> 
    <side>BUY</side> 
    <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    <user-id type="integer">830138774</user-id> 
    <exchange-rate> 
      <contract-id type="integer">18277852</contract-id> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <denccy-id type="integer">890731696</denccy-id> 
      <id type="integer">419011264</id> 
      <numccy-id type="integer">488525179</numccy-id> 
      <rate type="float">1.3</rate> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    </exchange-rate> 
    <user> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <id type="integer">830138774</id> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
      <username>John Doe</username> 
    </user> 
    <currency> 
      <ccy>EUR</ccy> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <id type="integer">488525179</id> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    </currency> 
  </contract> 
  <contract> 
    <amount type="float">500.0</amount> 
    <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
    <currency-id type="integer">890731696</currency-id> 
    <id type="integer">716237132</id> 
    <side>SELL</side> 
    <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    <user-id type="integer">830138774</user-id> 
    <exchange-rate> 
      <contract-id type="integer">716237132</contract-id> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <denccy-id type="integer">890731696</denccy-id> 
      <id type="integer">861902380</id> 
      <numccy-id type="integer">488525179</numccy-id> 
      <rate type="float">1.3</rate> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    </exchange-rate> 
    <user> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <id type="integer">830138774</id> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
      <username>John Doe</username> 
    </user> 
    <currency> 
      <ccy>GBP</ccy> 
      <created-at type="datetime">2010-04-16T13:59:40Z</created-at> 
      <id type="integer">890731696</id> 
      <updated-at type="datetime">2010-04-16T13:59:40Z</updated-at> 
    </currency> 
  </contract> 
</contracts> 

© Stack Overflow or respective owner

Related posts about jqgrid

Related posts about jQuery