jqgrid will not populate the table with json data - php

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!

Answer 1

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.

Answer 2

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.