tags:

views:

320

answers:

3

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> 
A: 

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")
    }
});
Justin Ethier
+1  A: 

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

Oleg
Sorry, that reloadGrid line was added to try to force it. Forgot the remove it. The main.css file doesn't contain anything.
Maxm007
I think I did check all when downloading the minimum version. When I unzip it, i've got 3 folders. CSS, JS and SRC. I use the files of the CSS and JS folder that contains the .min scripts for jquery 1.3.2 , jqgrid 3.6.4. I don't do anything with the /SRC folder.
Maxm007
The kqgrid in URL you posted loads fine in Chrome
Maxm007
How come you use .js files without the .min posfix? I can't find these in my download ?
Maxm007
Ok, I'm linking all the css files and .js files from your website and it doesn't work still. Your website works fine. Really weird.
Maxm007
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!
Oleg
A: 

Hello 007,

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!

Oleg