jqGrid data load issue

Question

I cannot get my data to show in jqgrid. I am using exactly the same code from this working example:

My data is different, but not substantially so:

{"records":95,"page":1,"total":1,"rows":[{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"}]}

I hate to re-open the same issue, but this is very frustrating to me.

EDIT: Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>InfoMaker  Monitor</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
    <style type="text/css">
        html, body { font-size: 75%; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>

    <script type="text/javascript">
    //<!CDATA[
        jQuery(function () {
            'use strict';
            jQuery("#jsonmap").jqGrid({
            url: 'http://localhost:8888/nancy/readasjson'
            ,datatype: 'json'
            ,ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }
            // see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
            ,jsonReader : {
                 page: "page"
                , total: "total"
                , records: "records"
                , rows: "rows"
                ,cell: "cell"
                ,id: "id",
                }
            ,colNames: ['Report','File']
            ,colModel :[ 
               {name:'Report'  ,index:'Report', width:55} 
              ,{name:'File',index:'File', width:55} 
            ]
            ,rowNum:10
            ,rowList:[10,20,30]
            ,viewrecords: true
            ,loadComplete: function() {
              console.log("Load Complete");
              //console.log("URI: " + jQuery("#jsonmap").jqGrid.datatype );
            }
            ,loadError: function(xhr,st,err) { 
                console.log(xhr.statusText);
                //$("#jsonmapMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText); 
            }
            ,width: '900'
            ,height: 'auto'//'300'
            ,caption: 'My first grid'
          }); 
          jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:false,del:false});
        });
    //]]>
    </script>
</head>
<body>
    <table id="jsonmap"><tr><td></td></tr></table>
    <div id="pjmap"></div>
</body>
</html>

And here is how the data looks now:

{"records":10,"page":1,"total":1,"rows":[{"id":61,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":62,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":63,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":64,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":65,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":68,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":77,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":79,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":80,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":81,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}}]}

I am tempted to fork the jqgrid source and add some console.log messages to it! Because failing mysteriously with no message is a great barrier to adoption.

What does Firebug tell you? What does your code look like? – Paul Tomblin Dec 24 '12 at 22:01 — Paul Tomblin, Dec 24 '12 at 22:01
I'm using chrome debugging and it does not complain. – Daniel Williams Dec 25 '12 at 03:38 — Daniel Williams, Dec 25 '12 at 03:38
Can't help without code. – Paul Tomblin Dec 25 '12 at 06:10 — Paul Tomblin, Dec 25 '12 at 06:10

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

The JSON data which you use has another format as in the referenced question, so jqGrid is, of cause, not able to read your data. jsonReader option describes the format of input data for jqGrig. If rows array contains object with named properties one should use jsonReader: {repeatitems: false}. In the case the colModel parameter should have columns with name: "Report" and name: "File".

The next problem of your JSON data - it has no id information for items of the rows. In the case jqGrid will use integer values 1, 2, 3... as rowids. Such automatical generation of ids will work good only for one grid per page. The second grid will have id duplicates. So it's recommended to include additional property id in every item of the array rows of the JSON input.

edited May 23 '17 at 11:48

Community

1
1

answered Dec 25 '12 at 19:45

Oleg

220,925
34
403
798

thank you! When I add the "id" field, should that be included in colModel? – Daniel Williams Dec 25 '12 at 22:18
Getting closer. I set the jsonReader as suggested, and then also added an "id" field to the mode. Should I include that field in the colModel? Now I get this error: Uncaught TypeError: Cannot read property '0' of undefined – Daniel Williams Dec 25 '12 at 22:22
@DanielWilliams: you don't need to add `id` to `colModel`. It will be used only to assign values of `id` attributes of `` elements of grid. If you still receive an error you should append your current code to the text of your question. – Oleg Dec 26 '12 at 09:15
@DanielWilliams: The code which you posted contains still wrong `jsonReader` (see my answer). Additional problem - you use `url` which contains `http://localhost:8888` prefix which should be removed because of possible [same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy) problem. – Oleg Dec 27 '12 at 21:09

jqGrid data load issue

1 Answers1