0

this really make me crazy, i've read some question:

  1. how to display jqgrid from url (local data works, url data does not)
  2. jqGrid not displaying JSON data
  3. jqGrid not displaying JSON data
  4. jgGrid not displaying json data

none of them is working for my case. i already check my json on http://jsonlint.com/ and it says valid JSON. i want jqgrid to display table from localhost/mine/jqgrid/json which will output:

[{"id":"1","invdate":"1","name":"1","note":"1","amount":"1"},
{"id":"2","invdate":"2","name":"2","note":"2","amount":"2"},
{"id":"3","invdate":"3","name":"3","note":"3","amount":"3"},
{"id":"4","invdate":"4","name":"4","note":"4","amount":"4"},
{"id":"5","invdate":"5","name":"5","note":"5","amount":"5"}]

and this is my script:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        {nocache}
        <title>{$title}</title>
        {/nocache}
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!--jqGrid sangat tergantung kepada CSS jquery-ui-->
        <link rel="stylesheet" type="text/css" media="screen" href="{#base_url#}/mine/assets/default/styles/jqgrid/jquery-ui-custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="{#base_url#}/mine/assets/default/styles/jqgrid/ui.jqgrid.css" />  
        <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            font-size: 1em;
        }
        </style> 
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery-ui-custom.min.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
        <!--prevent Smarty to parsing--> 
         {literal}
        <script type="text/javascript">
        $(function(){ 
          $("#list").jqGrid({
            //ini buat paging, value nya adalah ID dari HTML
            pager: '#pager',
            url:'localhost/mine/jqgrid/json',
            datatype: "json",
            height: 300,
            colNames:['ID','Inv Date','Name', 'Note','Amount','Tax','Total'],
            /**
             * to able to sort the right way, u must include sorttype:'int' for integer field
             */
            colModel :[ 
              {name:'id', index:'id',width:20, sorttype:'int'},
              {name:'invdate', index:'invdate', width:55}, 
              {name:'name', index:'name', width:90}, 
              {name:'note', index:'note', width:80, align:'right'}, 
              {name:'amount', index:'amount', width:80, align:'right'}, 
              {name:'tax', index:'tax', width:80, align:'right'}, 
              {name:'total', index:'total', width:150, sortable:true} 
            ],
            rowNum: 10,
            rowList:[10,20,30,40,50],
            recordpos: 'right',
            viewrecords: true,
            sortorder: "desc",
            sortname: "id",
            sorttype: "integer",
            viewrecords: true,
            multiselect: false,
            caption: "Manipulating JSON Data",
            recordtext: "Lihat {0} - {1} dari {2}",
            emptyrecords: "Tidak ada data",
            loadtext: "Loading...",
            pgtext : "Page {0} of {1}",
            jsonReader : { 
                repeatitems: false,
                id: "id",
                root: function (obj) {
                return obj;
            }},    
          });
        });
        </script>
        {/literal}
        <!--end of parsing-->
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <!--this is it, jqGrid load in here-->
        <table id="list"><tr><td/></tr></table> 
        <div id="pager"></div> 
        <!--end of jqGrid-->
        <p>{#app_name#}</p>
    </body>
</html>

please help me to solve this, thanks in advance.

Community
  • 1
  • 1
Bari
  • 88
  • 3
  • 15
  • Well you have the right answer here: [jqGrid not displaying JSON data](http://stackoverflow.com/questions/5018177/jqgrid-not-displaying-json-data). Your data doesn't contain paging informations so you must put the `page`, `total` and `records` definitions into your `jsonReader`. I feel a need to mark it as possible duplicate. – tpeczek Mar 21 '13 at 08:57
  • i still got nothing. the table still empty. – Bari Mar 21 '13 at 09:33
  • Can you verify (with Fiddler, FireBug etc.) that the request is being made and the proper response is being returned? – tpeczek Mar 21 '13 at 09:41
  • i don't know how to verifying using firebug, but i've got my screenshoot http://i49.tinypic.com/17x2es.png – Bari Mar 21 '13 at 09:52
  • Well the screenshot doesn't tell much beside the fact that the URL got created wrong, it is `http://localhost/mine/jqgrid/localhost/mine/jqgrid/json` which as I believe isn't what you have intended. Please change your configuration like this: `url:'http:/localhost/mine/jqgrid/json',`. If it comes to FireBug, you should look under the **Net** tab, you should see all the details about every request there. – tpeczek Mar 21 '13 at 10:02
  • when i change to url:'http://localhost/mine/jqgrid/json' the popup appearing and give me a warn: the requested URL /localhost/mine/jqgrid/json was not found on this server. but i change to url:'json' and now it's fine. but still the table isn't display my json, also i can see json's response in firebug. – Bari Mar 21 '13 at 10:16

2 Answers2

1

I think that the code which you posted is almost correct. The demo uses your JSON data and almost your code. It displays

enter image description here

I removed only duplicates of viewrecords option and changed height: 300 to height: "auto" to have better look. I would recommend you to use loadonce: true if you load all data at once from the server. In the case the datatype will be changed to "local" after the first loading of data from the server and all later sorting, paging and filtering of data will be implemented locally.

I don't know what is the error in your code. One possible reason could be wrong HTTP header in the server response, so the JSON response will be interpreted by jQuery as XML or HTML data. I recommend you additionally include loadError callback to have more information about the error if the grid still stay empty. Look at the answer for more details.

By the way I posted the suggestion (see the src-file) which would allows autodetection of different variation of input JSON format. I hope that the suggestion will be accepted by trirand and one will see much less questions about problems with reading of JSON data.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • thanks, for your answer. i tried [link]http://stackoverflow.com/a/6969114/315935 and the browser says "HTTP status code0 text status error error thrown". what happen? – Bari Mar 21 '13 at 10:02
  • @barreybunshin: I recommend you to use [Fiddler](http://www.fiddler2.com/Fiddler2/version.asp) or [Firebug](https://getfirebug.com/) or Developer Tools of IE or Chrome to catch HTTP trafic. It's important **which value has `Content-Type` HTTP header in the server response**. It should be `application/json`. – Oleg Mar 21 '13 at 10:08
  • i checked it with firebug and got my JSON's data in console>All>Response. but still, the table is empty. i change url to url:'json' and the status is OK. no Error popup appear. – Bari Mar 21 '13 at 10:14
  • It's important **not the body** of HTTP response, but the HTTP **headers**. You should examine headers of HTTP response and find the value of `Content-Type`. See "Examine HTTP Headers" in [the Firebug documentation](https://getfirebug.com/network). – Oleg Mar 21 '13 at 10:24
  • @barreybunshin: You can see that [the demo](http://www.ok-soft-gmbh.com/jqGrid/barreybunshin.htm) do displays the data in the grid. You can **compare more detailed the exact HTTP response of your demo with my**. Even if the server returns `Content-Type: text/plain` jQuery do can read the data correctly. It's unclear which versions of jqGrid, jQuery and jQuery UI you use. If `Content-Type: application/json` in the server response all versions of jQuery will read the response correctly. – Oleg Mar 21 '13 at 10:55
  • oh you're the man. finally the table displaying data. it because i added jquery.jqGrid.src-dynamicReader1.js as your suggestion. thank you so much. :) – Bari Mar 22 '13 at 01:03
0

Your json data should be like this 

{
"page":"1",
   "total":2,
   "records":"13", 
   "rows": [{"id":"1","invdate":"1","name":"1","note":"1","amount":"1"},
            {"id":"2","invdate":"2","name":"2","note":"2","amount":"2"},
            {"id":"3","invdate":"3","name":"3","note":"3","amount":"3"},
            {"id":"4","invdate":"4","name":"4","note":"4","amount":"4"},
            {"id":"5","invdate":"5","name":"5","note":"5","amount":"5"}] 
}

And change 

jsonReader : { 
                repeatitems: false,
                id: "id",
                root: function (obj) {
                return obj;
            }},

to 

jsonReader : { 
             repeatitems: false,
             id: "id"
             },
Ajo Koshy
  • 1,205
  • 2
  • 21
  • 33
Kris
  • 1,882
  • 1
  • 20
  • 23