CODEWITHSUNDEEP
jqueryjqgrid
Maxm007
Maxm007

Reputation: 1200

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>

Upvotes: 0

Views: 1662

Answers (4)

zawmn83
zawmn83

Reputation: 809

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.

Upvotes: 0

Oleg
Oleg

Reputation: 222007

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!

Upvotes: 0

Oleg
Oleg

Reputation: 222007

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

Upvotes: 2

Justin Ethier
Justin Ethier

Reputation: 134257

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")
    }
});

Upvotes: 0

Related Questions