jqGrid is empty with JSON call

Question

My jqGrid is coming empty with JSON call. Though it is working with datatype='jsonstring' but not with json type. here is my JSON

{
    "d": {
        "total": 6,
        "page": 1,
        "records": 6,
        "rows": [
            {
                "id": 1,
                "Name": "James",
                "EMPID": "0000000056",
                "EMPDATE": "",
                "JOBTYPE": "REQ",
                "DEPTID": "FIN",
                "STATUS": "P1"
            },
            {
                "id": 2,
                "Name": "James",
                "EMPID": "R2",
                "EMPDATE": "",
                "JOBTYPE": "REQ",
                "DEPTID": "FIN",
                "STATUS": "P1"
            },
            {
                "id": 3,
                "Name": "James",
                "EMPID": "V2",
                "EMPDATE": "",
                "JOBTYPE": "VOU",
                "DEPTID": "FIN",
                "STATUS": ""
            },
            {
                "id": 4,
                "Name": "James",
                "EMPID": "V1",
                "EMPDATE": "",
                "JOBTYPE": "VOU",
                "DEPTID": "FIN",
                "STATUS": ""
            },
            {
                "id": 5,
                "Name": "James",
                "EMPID": "009017",
                "EMPDATE": "",
                "JOBTYPE": "PY",
                "DEPTID": "",
                "STATUS": "V2"
            },
            {
                "id": 6,
                "Name": "James",
                "EMPID": "009018",
                "EMPDATE": "",
                "JOBTYPE": "PY",
                "DEPTID": "",
                "STATUS": "V1"
            }
        ]
    }
}

and my jqGrid call from javascript is

function getgrid()
    {

    $("#list").jqGrid({
     url:'http://10.240.26.41/GetGridFields',
    datatype: 'json',
    mtype: 'GET',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    //serializeGridData: function (postData) {
    //    return JSON.stringify(postData);
    //     },
    jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total",   records: "d.records" },
    colModel: [
        { name: 'id', key: true, width: 60, align: "center", hidden: false },
        { name: 'Name', width: 80, sortable: false, hidden: false },
        { name: 'EMPID', width: 180, sortable: false, hidden: false },
        { name: 'EMPDATE', width: 180, sortable: false, hidden: false },

        { name: 'JOBTYPE', width: 180, sortable: false, hidden: false },
        { name: 'DEPTID', width: 180, sortable: false, hidden: false },
        { name: 'STATUS', width: 180, sortable: false, hidden: false }
    ],
    rowNum: 10,
    rowList: [10, 20, 300],
    pager: "#pager",
    viewrecords: true,
    gridview: true,
    rownumbers: true,
    height: 230,
    caption: 'Emp Detail'
    })

    }

Please let me know where i am wrong here. It is working fine with jsonstring.

score 0 · Answer 1 · answered Feb 24 '12 at 02:35

0

I suggest you validate your json result using jslint since using jsonstring is working could be a format type problem

answered Feb 24 '12 at 02:35

Elder Santos

309
2
11

i did it and it is coming fine. One more thing, in my page i am having another Ajax call via getJSON. is this could be the issue here. Another JSON call is working fine. – JDev Feb 24 '12 at 19:55
jqgrid uses .ajax(), getJSON() is just a .ajax90 wrapper, but you can try – Elder Santos Feb 24 '12 at 21:07

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

How you can see on the demo your jqGrid can read your JSON data. I made in the demo only minimal optimization changes which don't important for your main problem.

So I suppose, that you have either the problem with the usage of full URL (you should use '/GetGridFields' instead of 'http://10.240.26.41/GetGridFields') because you can't get Ajax call to another IP host because of the same origin policy. One other possible reason is that you have wrong 'Content-Type' or some other HTTP header. You can examine the HTTP headers with respect of Fiddler, Firebug or just with Developer Tools of IE or Chrome (see "Network" tab).

In any way I would recommend you to include loadError handler to jqGrid. See the answer for details.

edited May 23 '17 at 12:29

Community

1
1

answered Feb 28 '12 at 09:43

Oleg

220,925
34
403
798

Thanks for the useful suggestions. i added LoadErrod handler as per your suggestion and i am getting following errors in Firefox..HTTP status code: 200 textStatus: parsererror errorThrown: SyntaxError: JSON.parse: unexpected character – JDev Feb 28 '12 at 21:58
@JDev: You are welcome! I interpret the results that you do successfully received the data from the server and the data will be correct interpreted as JSON data, but the data has syntax error. We should be now more close to the solution. You should examine the `jqXHR.responseText` which contains the server response. I suppose that the data are don't identical to the JSON data which you posted. You should be absolutely exactly in the analyse of `jqXHR.responseText` or you can get the same data with Fiddler, Firebug or just with Developer Tools like I wrote before. – Oleg Feb 28 '12 at 22:09
Also in Firebug i can see that --Response Headers Content-Encoding gzip Content-Length 8730 Content-Type text/html; CHARSET=UTF-8 and under Response tab i am getting HTML tags and also getting my above JSON string under HTML(Third tab). Shouldn't it be JSON instead of HTML?. Above JSON data i copied from the HTML tab.it is same as above but under HTML tab. – JDev Feb 28 '12 at 23:10
@JDev: It's what I originally supposed. The correct `Content-Type` have to be "application/json" (or "application/json; charset=utf-8"). It's an error in the server code. Which technology you use on the server? In any way you should set either implicitly or explicitly the `Content-Type` header to the correct value. I am sure after you fix the problem the grid will be filled correctly. – Oleg Feb 28 '12 at 23:19
You are too good. Thanks a lot for all your help on making this work. It was Content-Type issue as you correctly suspect at the beginning. I am new to Jqgrid and Jquery world and may require your assistance and guidance later on as well. Thanks a ton. – JDev Feb 29 '12 at 19:54
I have another issue here. 1) i can see all the icons like search, Add but everything on the Grid is disabled i.e i cannot click on it (including pager drop down), mover over on the grid row not working as well. 2)In the above your working Demo, Text Font face, size, hover etc are perfect. But in my application i am getting it bigger and different font style as well. Could you please also let me know how can set these and where. Since i am new to this forum, i am not sure if i have start a new question thread for new issue. – JDev Mar 02 '12 at 16:14
@JDev: It's better if you opens new question and write me comment with URL to the question. You should include **full HTML code** together with JavaScript code which you use. The most problems with the font size and disabled elements are because of missed CSS, wrong order of JS files of missing ` `. – Oleg Mar 02 '12 at 17:43
Thanks @Oleg, i could figure out why it is happening but don't where to look. Pls help. Here is the link for new question.http://stackoverflow.com/questions/9541906/jqgrid-grid-icons-and-hover-does-not-work-when-raphael-is-also-in-the-same-page – JDev Mar 02 '12 at 23:42
You MUST make sure that the URL you're using to get the JSON data contains no HTML markup at all. If it does, jqGrid and JQuery will not load JSON data from it. – Mike Gledhill Apr 02 '14 at 13:46
@MikeGledhill: Sorry, but if we speak about JSON data then it have to be JSON data. HTML have absolute another format. If one place string which looks like JSON inside of HTML page it will be of cause not a JSON. – Oleg Apr 02 '14 at 14:26

jqGrid is empty with JSON call

2 Answers2

Linked