jqgrid will not populate the table with json data

Question

I have been looking around for an answer to this but have not been able to find one. I am currently taking data from a mssql database and everything seems to populate fine on the php end but here is the code anyway

$responce->total = $total_pages;
$responce->page = $page;
$responce->records = $count;
$i=0;

while($row = sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC)) {
    $responce->rows[$i]['id']=$row[Cell1];            
    $responce->rows[$i]['cell']=array($row[Cell1],$row[Cell2],$row[Cell3]);
    $i++;
}
echo $json_encode($responce);

And my json file comes out like this:

{"total":"1","page":"1","records":"1","rows":[{"id":"1","cell":["1","2","3"]}]}

And finally my HTML looks like this:

<link rel="stylesheet" type="text/css" media="screen" href="css/south-street/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link href="css/ui.multiselect.css" />

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
    $("#list").jqGrid({
        url: "retrieve.php",
        datatype: "json",
        mtype: "POST",
        colNames: ["Cell1", "Cell2", "Cell3"],
        colModel: [
            { name: "Cell1", width:55 , index:'Cell1' },
            { name: "Cell2", width: 90, index:'Cell2' },
            { name: "Cell3", width: 80, index:'Cell3' },
        ],
        jsonReader: { repeatitems: false },
        pager: "#pager",
        rowNum: 10,
        rowList: [10, 20, 30],
        scroll:1,
        sortname: Cell1",
        sortorder: "asc",
        sortable:true,
        viewrecords: true,
        gridview: true,
        ignoreCase:true,
        autowidth:true,
        ondblClickRow: function (id) {
            $(this).jqGrid('viewGridRow', id, { caption: "Server Information" });
        }
    });
});
</script>

If someone could please help me to figure out why my grid wont properly populate I would really appreciate it!

score 0 · Accepted Answer · answered Jun 14 '13 at 16:02

0

The main errors in your code are the following:

you should fix syntax error sortname: Cell1" to sortname: "Cell1".
remove jsonReader: { repeatitems: false } which is wrong with thze format which you use.
remove the second version of jQuery. Either jquery.js or jquery-1.9.0.min.js should be used.

answered Jun 14 '13 at 16:02

Oleg

220,925
34
403
798

Hey thank you for your reply, I tried fixing all of those errors but still no luck, is there anything else that i should be taking into consideration? Thank you – PcGuy Jun 14 '13 at 17:54
@PcGuy: Nothing more is really required to load the JSON data successfully. See [the demo](http://www.ok-soft-gmbh.com/jqGrid/PcGuy0.htm). If you will still have problems I would recommend you to add `loadError` callback. See [the answer](http://stackoverflow.com/a/6969114/315935) for more details. – Oleg Jun 14 '13 at 17:59
Ok so I tried what you did and put all the data manually into a json file and just called on the json file and it worked fine, so then im assuming there is an error in the way i return the data back to the grid. – PcGuy Jun 14 '13 at 20:45
@PcGuy: You should use some tools like Fiddler, Firebug or Developer Tools (press F12 in Internet Explorer to start it) to trace **HTTP traffic** between the server and the client. The returned data have to be pure JSON string without any wrapping in HTML and should have `Context-Type: application/json` in HTTP header. Do you included `loadError` callback like I suggested before? Which error you get? Typical error of newcomer is usage wrong `Context-Type` of HTTP headers of the server response. You should set it explicitly to `application/json`. – Oleg Jun 15 '13 at 11:34
Thanks for all your help so far, i enabled the loaderror and tracked the traffic with firebug and i seem to be getting the following HTTP status code: 200 textStatus: parsererror errorThrown: Invalid JSON:
followed by a lot of random HTML code that looks like it has some php warning embedded in it. How would i go about changing it to return the correct data and not the HTML? – PcGuy Jun 17 '13 at 13:42
@PcGuy: If the server returns wrong formatted data (HTML code with warning instead of JSON code) then you should fix you server code. It's pure PHP problem and I can't help you because I don't use PHP myself. The localizing of the origin of the problem is more as the half of the solution. – Oleg Jun 17 '13 at 13:48
Thank you i finally got it working, i had to fix one of the warnings that was causing it to return html formatting – PcGuy Jun 17 '13 at 17:35

Ravish Patel · Answer 2 · 2013-06-17T14:58:36.047

May be your JS file are conflicted.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>

You should be use only one JS instead use of both jquery file.

and Change sequence of js file like this way..

<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script> 
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>

Please remove "," from colModel

colModel: [
            { name: "Cell1", width:55 , index:'Cell1' },
            { name: "Cell2", width: 90, index:'Cell2' },
            { name: "Cell3", width: 80, index:'Cell3' },
        ],

to

colModel: [
            { name: "Cell1", width:55 , index:'Cell1' },
            { name: "Cell2", width: 90, index:'Cell2' },
            { name: "Cell3", width: 80, index:'Cell3' }
        ],

I think it solve your all problem.

Thank you for your answer unfortunately im still having the same problem — PcGuy, Jun 17 '13 at 13:44
Please remove last "," from that line it solve your problem { name: "Cell3", width: 80, index:'Cell3' } In the ColModel options. — Ravish Patel, Jun 17 '13 at 14:19

jqgrid will not populate the table with json data

2 Answers2