JQGrid 'undefined' error

Question

I am getting a JavaScript error when trying to use the JQGrid:

"Message: 'undefined' is null or not an object"

When I debug on my server, I see that my JSON output looks like this: (does it matter that the "id" value is not inside double quotes?)

{
"page":"1",
"total":"20",
"records":"5",
"rows":[
  {"id":1,"name":"Sam","phone":"732-333-2222"},
  {"id":2,"name":"Dan","phone":"000-222-1111"},
  {"id":6,"name":"George","phone":"333333"},
  {"id":4,"name":"Jerry","phone":"332-333-4444"},
  {"id":7,"name":"John","phone":"666666"},
  {"id":8,"name":"Tom","phone":"3333"}]
}

.. and my page looks like this:

<script type="text/javascript">
  jQuery(document).ready(function(){

  jQuery("#list").jqGrid({
  url:'/myUrlPage',
  datatype: 'json',
  mtype: 'GET',
  colNames:['Id', 'Name', 'Phone'],
  colModel :[
    {name:'id', index:'id', width:55},
    {name:'name', index:'name', width:90},
    {name:'phone', index:'phone', width:150, sortable:false} ],
  pager: jQuery('#pager'),
  rowNum:10, rowList:[10,20,30],
  sortname: 'id',
  sortorder: "desc",
  viewrecords: true,
  imgpath: 'themes/basic/images',
  caption: 'My first grid' }); });
</script>

Answer 1

You main problem will be solved if you include

jsonReader: { repeatitems: false }

parameter in your jqGrid. See details in the jqGrid documentation.

Moreover I modified a little your demo. You can see it here. I recommend you remove deprecated imgpath parameter. Instead of that I recommend you to use height: 'auto' which gives you good results in the most cases. Instead of jQuery('#pager') is better to use just '#pager'. You should additionally increase the value of the width for some columns in case of the usage of pager and viewrecords: true. I included in my demo the jQuery("#pager_left").hide(); statement which hide some block of the pager which you not use now. If you will start to use navigator buttons you should remove the line.

One more remarks about the JSON data which you use. The values of id, page, total and records properties can be either strings or integers, so "id":1 will gives you the same results as "id":"1".

It's important to understand how you should fill page, total and records. You current values are page=1, total=20, records=5 and you data contain 6 rows. All the data has no sense. The jqgrid asked the server with respect of additional parameters which it appended to the URL to gives one page of the data with 10 rows per page (rowNum:10). Your answer from the server means that your data contain 5 items (records=5) totally. If you order the data (the 5 items) in pages (10 items per page) you will have 20 pages (total=20) and the first one from there (page=1) you are filled with the data (6 items). The strange values of page, total and records from your JSON data follows to strange values in the pager on the demo:

I would recommend you to read the answer where I tried to describe why jqGrid need so strange format of JSON data.