1

I am new to jqgrid and am trying to use json to load the data. I have tried to use the jqgrid demos as a base and then build from there. The json data looks good, but I can't get anything loaded into the grid. Any ideas? I was hoping the use of loaderror or loadcomplete would at least give me insight, but I am not able to retrieve any message why the grid won't load.

json data:

{
    "page": "1",
    "total": 1,
    "records": "12",
    "rows": [
        [
            "67",
            "3 - Sandbox: Appointment Set"
        ],
        [
            "68",
            "1 - Sandbox: Email requested"
        ],
        [
            "69",
            "2 - Sandbox: Questions not answered"
        ],
        [
            "74",
            "1 - TenPointSix: Email requested for more information"
        ],
        [
            "75",
            "2 - TenPointSix: Registered for webinar2"
        ],
        [
            "76",
            "3 - TenPointSix: Webinar registration confirmed"
        ],
        [
            "93",
            "5-Test Entry"
        ],
        [
            "94",
            "test3"
        ],
        [
            "95",
            "test2"
        ],
        [
            "97",
            "Jeff"
        ],
        [
            "103",
            "sortorder"
        ],
        [
            "106",
            "reload"
        ]
    ]
}

My grid code:

<table id="jsonmap"></table>
<div id="pjmap"></div>       

    <script language="JavaScript" type="text/javascript">


 jQuery("#jsonmap").jqGrid({        
    url:'sampleLoad.php?client=<?=$clientId5?>',
    datatype: "json",
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    colNames:['Inv No','Name'],
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'name',index:'name', width:100}

    ],
    rowNum:15,
    rowList:[15,30,45],
    pager: '#pjmap',
    sortname: 'id',

    viewrecords: true,
    sortorder: "asc",
    jsonReader: {
        root: "Rows",
        cell: "",
        page: "Page",
        total: "Total",
        records: "Records",
        repeatitems: false,
        id: "0"
    },
    loadComplete: function() {

        alert("Load Complete");
    },
    loadError: function(xhr,st,err) { $("#jsonmapMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText); },



    caption: "JSON Mapping",
        width: '900',
                height: '300'

});


jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:false,del:false});

Any help would be appreciated.

Thanks,

Jeff

Chandu
  • 81,493
  • 19
  • 133
  • 134
Jeff
  • 15
  • 1
  • 4

1 Answers1

2

The problem is the wrong jsonReader which you use. For example you use rows in the JSON data, but use root: "Rows". The format of the data corresponds default repeatitems: true property, but you used repeatitems: false and so on.

The correct jsonReader is

jsonReader: {
    cell: "",
    id: "0"
}

Additionally I would recommend you to add gridview: true and use height: 'auto' instead of height: '300' which simplify the setting of height.

The demo shows the modifications.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Oleg, thanks for your help. I made your suggestions and still nothing loads. Any other ideas? json reader: jsonReader : { cell: "", id: "0" }, json: {"page":"1","total":1,"records":"15","rows":[["1","90 - Not a good time to speak"],["3","94 - Invalid Number"]]} – Jeff Mar 05 '12 at 16:56
  • @Jeff: You should compare more exactly your current code with [the demo](http://www.ok-soft-gmbh.com/jqGrid/Jeff.htm) which uses **the data and the code**. I recommend you additionally implement `loadError` callback which will gives you more information *why the grid are empty* (see [the answer](http://stackoverflow.com/a/6969114/315935) for details). Typical problem is the wrong `Content-type` header of the HTTP response. You can use. See [the answer](http://stackoverflow.com/a/9479609/315935) and the comments for example for more information. – Oleg Mar 05 '12 at 17:02
  • Thanks - I had left out a div for my error message and I have added content-type json. Finally, i was able to find out that i am having a json parse error - code 200. I will start searching on how to fix. Thanks for your help. Jeff – Jeff Mar 05 '12 at 18:43
  • Oleg, i am using php and i don't think that should make any difference, but I can't overcome the parserror. I have checked my json in jsonlin and everything is valid. i have taken the json and placed it into a file as you did, but my grid didn't load. I have included content-type & content-length in my response. I am puzzled. json: {"page":"1","total":1,"records":"15","rows":[["1","90 - Not a good time to speak"]]} I have the identical code that you used to mimic my grid except i am getting a parse error. Any other ideas? Thanks, Jeff – Jeff Mar 05 '12 at 20:10
  • @Jeff: You wrote: "I have included content-type & content-length in my response". First you can't set content-length. It will be calculated automatically. Second I think that you have still wrong "Content-type". You should not trust the PHP code which you use. Instead of that **you should verify** which `Content-type` has really the header of the HTTP response. Did you traced the HTTP traffic with [Fiddler](http://www.fiddler2.com/fiddler2/) or [Firebug](http://getfirebug.com/) or with respect of "Network" Tab of Developer tools of Internet Explorer or Google Chrome? – Oleg Mar 05 '12 at 20:24
  • @Jeff: The parse error - code 200 means either wrong JSON data (it is not your case) or the wrong `Content-type` of HTTP header. So I am almost sure that your server code still place wrong `Content-type` in the response. – Oleg Mar 05 '12 at 20:27
  • i am using firebug and the response header is pasted below. ResponseHeaders Date Mon, 05 Mar 2012 21:35:27 GMT Connection Keep-Alive Content-Length 506 Last-Modified Mon, 05 Mar 2012 19:32:12 GMT Server Apache/2.2.17 (Win32) mod_ssl/2.2.17 OpenSSL/0.9.8o PHP/5.3.4 mod_perl/2.0.4 Perl/v5.10.1 ETag "9800000004c904-1fa-4ba83fbaeb05e" Content-Type application/json Accept-Ranges bytes Keep-Alive timeout=5, max=99 RequestHeaders Accept application/json, text/javascript, */*; q=0.01 X-Requested-With XMLHttpRequest – Jeff Mar 05 '12 at 21:36
  • @Jeff: `Content-Type: application/json` is correct `Content-Type`. In the case you should make copy & paste with the body of the server response. You can verify the JSON in the http://jsonlint.com/. It can be that the server response contain wrong JSON data - not the same which you posted before. – Oleg Mar 05 '12 at 21:41
  • Wow - down the road i go. I had several echo statements in my code that may have been throwing off the results. I have removed all of the echos and now I am getting an "unexpected end of input" error. I have verified the json w/jsonlint.com and everything checks as valid. Your help has been most appreciated. Thanks, Jeff – Jeff Mar 05 '12 at 23:25
  • Oleg, i was able to load the grid after i removed all of the echos except the echo json_encode($responce); Thank you very much for all of your help! Jeff – Jeff Mar 05 '12 at 23:56
  • @Jeff: Is the error "unexpected end of input" still exist? I overflow the problem during the first reading. It can mean the error in JavaScript code like missing '}' or something like that. You can use code from my demo. – Oleg Mar 06 '12 at 00:00