Why won't jqGrid populate initially in Chrome
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>
Sorry, but how you can verify on http://www.ok-soft-gmbh.com/jqGrid/XmlTest/xmlorg.htm your original code works fine in Chrome ("4.1.249.1045 (42898)" or "5.0.342.9 beta"). I don't include main.css because you don't post it.
I could say, that the line
$("#list").trigger("reloadGrid")
(without semicolon by the way) can be removed. And jqGrid table and page div could be reduced to
<table id="list"></table>
<div id="pager"></div>
(see http://www.ok-soft-gmbh.com/jqGrid/XmlTest/xml.htm) but all that help you not really. My advice is:
- use current version of jqGrid (3.6.4)
- verify that you check all jqGrid parts you need when you download minimized version of jqGrid from http://www.trirand.com/blog/?page_id=6. If you not sure - check all. Or use the last one version from GitHub (especially if you use jQuery 1.4.x), if uncompressed version of jqGrid is OK for you.
I think, that your error is because of using a wrong minimized version of jqGrid (without some parts which you really needed). Another less possible point of errors is your main.css file.
Best regards
Instead of calling $("#list").trigger("reloadGrid") after the grid object is initialized, try calling it from loadComplete, which is called after data is loaded from the URL:
jQuery("#list").jqGrid({
...
rowList:[10,20,30],
loadComplete: function(){
("#list").trigger("reloadGrid")
}
});
because my comment my answer is not easy to see, I posted the same information as a second answer:
It's very strange! I just downloaded jqGrid with all selected checkboxes one more time and change xmlorg.htm to use min version of jquery-1.3.2: all works. So the last suggestion: you download all files I used from http://www.ok-soft-gmbh.com/jqGrid/XmlTest/XmlTest.zip. Then unzip, place all on a Web Site, for example, your localhost (IIS). Fix url to all.xml and opens xmlorg.htm or xml.htm from your web site. It must work!
I'm using jquery 1.5.2 and jqgrid 4.0. Similar problem occur Chrome 5.0.396.0, but other chrome versions and IE/FF are working well.
I also tested with jquery 1.4.4, this problem still exist. But when I tested with jquery 1.3.2, the problem is solved.
加载中,请稍侯......
精彩评论