jqGrid with JSON data renders table as empty

Question

I'm trying to create a jqgrid, but the table is empty. The table renders, but the data doesn't show.

The data I'm getting back from the php call is:

{
"page":"1",
"total":1,
"records":"10",
"rows":[
{"id":"2:1","cell":["1","image","Chief Scout","Highest Award test","0"]},
{"id":"2:2","cell":["2","image","Link Badge","When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)","0"]},
{"id":"2:3","cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]},
{"id":"2:4","cell":["4","image","Voyageur Scout Award","Voyageur Scout Award is the right after Pioneer Scout.","0"]},
{"id":"2:5","cell":["5","image","Voyageur Citizenship","Learning about and caring for your community.","0"]},
{"id":"2:6","cell":["6","image","Fish and Wildlife","Demonstrate your knowledge and involvement in fish and wildlife management.","0"]},
{"id":"2:7","cell":["7","image","Photography","To recognize photography knowledge and skills","0"]},
{"id":"2:8","cell":["8","image","Recycling","Demonstrate your knowledge and involvement in Recycling","0"]},
{"id":"2:10","cell":["10","image","Voyageur Leadership ","Show leadership ability","0"]},
{"id":"2:11","cell":["11","image","World Conservation","World Conservation Badge","0"]}
]}

The javascript configuration looks like so:

$("#"+tableId).jqGrid ({
    url:'getAwards.php?id='+classId,
    dataType : 'json',
    mtype:'POST',
    colNames:['Id','Badge','Name','Description',''],
    colModel : [
        {name:'awardId', width:30, sortable:true, align:'center'},
        {name:'badge', width:40, sortable:false, align:'center'},
        {name:'name', width:180, sortable:true, align:'left'},
        {name:'description', width:380, sortable:true, align:'left'},
        {name:'selected', width:0, sortable:false, align:'center'}
        ],
    sortname: "awardId",
    sortorder: "asc",
    pager: $('#'+tableId+'_pager'),
    rowNum:15,
    rowList:[15,30,50],
    caption: 'Awards',
    viewrecords:true,
    imgpath: 'scripts/jqGrid/themes/green/images',
    jsonReader : { 
        root: "rows", 
        page: "page", 
        total: "total", 
        records: "records", 
        repeatitems: true, 
        cell: "cell", 
        id: "id",
        userdata: "userdata", 
        subgrid: {root:"rows", repeatitems: true, cell:"cell" } 
    },
    width: 700,
    height: 200
});

The HTML looks like:

<table class="awardsList" id="awardsList2" class="scroll" name="awardsList" />
<div id="awardsList2_pager" class="scroll"></div>

I'm not sure that I needed to define jsonReader, since I've tried to keep to the default. If the php code will help, I can post it too.

Answer 1

I got it to work!

The dataType field should be datatype. It's case sensitive.

Answer 2

I am having the same problem. I even eliminated the server side JSON generation and embedded the JSON in the html page as datastr (as indicated in the jqGrid docs on page 30). Tried in IE 6, then Firefox with Firebug. The data is available - the grid displays, the table that should contain data is empty. The entire test page follows. Any ideas??

---

(Sorry that the code is shown as image - I couldn't figure out how the <pre><code> tags work in this forum.)

Answer 3

I don't think your ID is the correct type, I think it should be an int.

For the given json you really don't need the jsonreader settings. What you have listed is the defaults anyway, plus you don't have a subgrid in your json.

Try this:

{
"page":"1",
"total":1,
"records":"10",
"rows":[
{"id":1 ,"cell":["1","image","Chief Scout","Highest Award test","0"]},
{"id":2,"cell":["2","image","Link Badge","When you are invested as a Scout, you maybe eligible to receive a Link Badge. (See page 45)","0"]},
{"id":3,"cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]},
{"id":4,"cell":["4","image","Voyageur Scout Award","Voyageur Scout Award is the right after Pioneer Scout.","0"]},
{"id":5,"cell":["5","image","Voyageur Citizenship","Learning about and caring for your community.","0"]},
{"id":6,"cell":["6","image","Fish and Wildlife","Demonstrate your knowledge and involvement in fish and wildlife management.","0"]},
{"id":7,"cell":["7","image","Photography","To recognize photography knowledge and skills","0"]},
{"id":8,"cell":["8","image","Recycling","Demonstrate your knowledge and involvement in Recycling","0"]},
{"id":9,"cell":["10","image","Voyageur Leadership ","Show leadership ability","0"]},
{"id":10,"cell":["11","image","World Conservation","World Conservation Badge","0"]}
]}

Answer 4

Same issue here - the grid stays empty. My response looks like:

{"Page":"1","Total":"10","Records":"99",
"Rows":[
{"Time":"11:48:15","Cell":["Benign","0.047","0.047","658","True"]},
{"Time":"11:48:20","Cell":["Normal","0.051","0.051","796","True"]},
{"Time":"11:48:23","Cell":["Normal","0.049","0.049","2252","True"]},
{"Time":"11:48:33","Cell":["Abnormal","0.054","0.054","665","True"]},
{"Time":"11:48:38","Cell":["Normal","0.061","0.061","2064","True"]},
{"Time":"13:32:14","Cell":["Normal","0.087","0.087","1481","True"]},
{"Time":"13:32:15","Cell":["Normal","0.087","0.087","1481","True"]},
{"Time":"13:48:33","Cell":["Benign","0.054","0.054","665","True"]},
{"Time":"13:48:34","Cell":["Benign","0.054","0.054","665","True"]},
{"Time":"13:54:15","Cell":["Normal","0.087","0.087","1481","True"]}
]}

Any ideas??

Answer 5

I also got it to work: datatype is the correct spelling -- it's shown that way in the example but it is inconsistent with everything else in the library so it was easy to get wrong

I'm getting very tired chasing this sparse documentation around and I really feel like JSON, which is right and proper to be using in JavaScript, has really been given short coverage in favor of XML. Python and JavaScript together, through JSON, is a really strong combination, but it's a constant struggle with this particular library.

Anyone with an alternative that:

1> Properly supports jQuery UI themes (including rounded corners!) (http://datatables.net has much nicer support for themes)

2> Allows resizing of columns (http://datatables.net doesn't support this out of the box)

3> Allows sub-grids (http://datatables.net lets you do whatever you want here, through an event)

please let me know. I'm spending more time on this one part of my interface than on the whole rest of it combined and it's all the time spent searching for working examples and "trying things" which is just getting annoying.

S

Answer 6

The problem also occures when you include script jquery.jqGrid.min.js before then grid.locale-en.js. Check this if there are any problems with controller's method call.

Answer 7

I experienced the same problem when migrating from jqGrid 3.6 to jqGrid 3.7.2. The problem was my JSON was not properly double-quoted (as required by JSON spec). jqGrid 3.6 tolerated my invalid JSON but jqGrid 3.7 is stricter.

Refer here: http://simonwillison.net/2006/Oct/11/json/

Invalid:

{
page:"1",
total:1,
records:"10",
rows:[
    {"id":"2:1","cell":["1","image","Chief Scout","Highest Award test","0"]},
    {"id":"2:2","cell":["2","image","Link Badge","When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)","0"]},
    {"id":"2:3","cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]}
]}

Valid:

{
"page":"1",
"total":1,
"records":"10",
"rows":[
    {"id":"2:1","cell":["1","image","Chief Scout","Highest Award test","0"]},
    {"id":"2:2","cell":["2","image","Link Badge","When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)","0"]},
    {"id":"2:3","cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]}
]}