Friday, April 16, 2010

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

Programmer Question

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>


Find the answer here

No comments:

Post a Comment

LinkWithin

Related Posts with Thumbnails