jqgrid addJSONData doesn't work

Question

I am working on jqGrid, the return json is

{"total":1,"page":1,"records":2,"rows":[{"projectId":"1022","name":"john"}]}

then in the function I call

 var jsongrid = eval("("+data+")");                  
 var thegrid = jQuery("#projectList")[0];                       
 thegrid.addJSONData(jsongrid);

but it give me error: object is null or undefined. don't know why . I didn't use json reader.

BTW, do you know how to use set method to set "total", "page", "records" ?

Answer 1

I suppose that you try to call addJSONData method before the grid will be created with respect of jQuery("#projectList").jqGrid({...});

The usage of addJSONData is practically always unneeded (see one from my first posts about the subject here). In the same way you should never use eval method which is evil. One uses jQuery.parseJSON or JSON.parse instead.

I suppose that you should use datatype: 'json' to solve your problem. You should post more code to show you how you should use other jqGrid options in your case.

UPDATED: From your previous question it seems that you want just send additional data to the server from the form on clicking of the "Search" button. In the case I would suggest to modify the code to the following

var $grid = $("#projectList");

$grid.jqGrid({
    url: 'user595234.json',
    datatype: "json",
    serializeGridData: function (data) {
        return $.param(data) + '&' + $("#project_search_form").serialize();
    },
    jsonReader: {id: "projectId", repeatitems: false},
    colNames: ['ID', 'Name'],
    colModel: [
        {name: 'projectId', width: 255},
        {name: 'name', width: 255}
    ],
    rowNum: 10,
    rowList: [10,20,30],
    pager: '#projectPager',
    sortname: 'projectId',
    viewrecords: true,
    sortorder: "desc",
    caption: "Simple data manipulation",
    height: "auto"
}).jqGrid("navGrid", "#projectPager", {edit: false, add: false, del: false});

$("#search").click(function () {
    $grid.trigger("reloadGrid", [{page: 1}]);
});

In the demo I get just the form from the example of the usage jQuery.serialize and modify it a little. It display the data which you need

Additionally, like you can easy verify with respect of Fiddler or Firebug, the URL will ba appended with additional parameters like below

...?_search=false&nd=1336057299806&rows=10&page=1&sidx=projectId&sord=desc&a=1&b=2&c=3&d=4&e=7&f=8 

The standard parameters

_search=false&nd=1336057299806&rows=10&page=1&sidx=projectId&sord=desc

will be appended with parameters from the form

a=1&b=2&c=3&d=4&e=7&f=8

In some scenarios one can use jQuery.serializeArray alternatively. It allows to serialize the data in another format (like JSON) or convert the data in some another format (see here) which can be easy merged with the standard jqGrid parameters using $.extend.