JQ Grid web service call with parameters doesn't work, does with Ajax

Question

I'm able to pass form data to an ASP.Net web service from an ajax script and receive a JSON object in response, works great. When I make the same call, with the same parameters in JQ Grid I receive an "Invalid web service call" or "Invalid JSON primitive" in response.

I believe this is fairly close to the following post, I've applied the recommendations (as well as those from many other posts) but with no success. JQGrid - Cannot call ASP.NET WebMethod but can with Ajax

The following Ajax code is successful, it passes the forms parameters to the web service and retrieves the results in the JSON format.

Ajax Javascript code: this code works it's the JQ Grid (further below) thats the problem

<script language="JavaScript">
    function populateResults() {
    var arForm = $("#searchForm").serializeArray();

    $.ajax({
      type: "POST",
      url: "./WebService/Service.asmx/doSearch",
      data: JSON.stringify({ formVars: arForm }),
      contentType: "application/json",
      dataFilter: function(data) {
        var msg = eval('(' + data + ')');
        if (msg.hasOwnProperty('d'))
          return msg.d;
        else
          return msg;
      },
      success: function(msg) {
        // This will now output the same thing 
        //  across any current version of .NET.
        //console.log(msg.foo);
      }
    });
    };

    </script>

Web Service:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string doSearch(NameValue[] formVars)
{...

The Problem: The following is my JQ Grid code that fails:

<script type="text/javascript">
    function populateResults() {
        var arForm = $("#searchForm").serializeArray(); 
        var searchParams = JSON.stringify({ formVars: arForm });

        var grid = $("#tblResults");
        grid.jqGrid({
            url: "./WebService/Service.asmx/doSearch",
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            data: searchParams,
            dataType: 'json',
            dataFilter: function(data) {
                var msg = eval('(' + data + ')');
                alert(msg.d);

                if (msg.hasOwnProperty('d'))
                  return msg.d;
                else
                  return msg;
            },
            mtype: 'POST',
            colNames:['Exam Date','Type','Name','UR Number','Pathology Type','Result Date','Modality', 'Results'],
            colModel:[
                {name:'resExamDate',index:'resExamDate', editable:false, width:120},
                {name:'resType',index:'resType', editable:false, width:60},
                {name:'name',index:'name', editable:false, width:120},
                {name:'urnumber',index:'urnumber', width:65, sorttype:'int'},
                {name:'resPathologyType',index:'resPathologyType', editable:false, width:120},
                {name:'resResultDate',index:'resResultDate', editable:false, width:120},
                {name:'resModality',index:'resModality', editable:false, width:170, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'}},
                {name:'results',index:'results', editable:false, width:240, cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"'}}
            ],
            rowNum:10,
            rowList:[5,10,20],
            pager: '#pager',
            sortname: 'surname',
            viewrecords: true,
            sortorder: "desc",
            height: "100%",
            processData: false,  //jquery will stringify again apparently: https://stackoverflow.com/questions/6471759/invalid-web-service-call-missing-value-for-parameter
            serializeGridData: function (postData) { return JSON.stringify(postData);   },
            jsonReader: { 
                total: "total",
                page: "page",
                records: "records",
                root: "rows",
                id: "id",
                cell: "cell",
                repeatitems: false
            }
        });
    }
    </script>

In Firebug I receive:

Post
{"_search":false,"nd":1338180778103,"rows":10,"page":1,"sidx":"surname","sord":"desc"}

Response
{"Message":"Invalid web service call, missing value for parameter: \u0027formVars\u0027.","StackTrace":"   at System.Web.Script.Services.WebServiceMethodData.CallMethod(Object target, IDictionary`2 parameters)\r\n

Or if I comment out the "serializeGridData:" line (I think I'm serializing it twice or something so I tried commenting it out), I get:

Post:
    _search=false&nd=1338180203206&rows=10&page=1&sidx=surname&sord=desc

Response:
    {"Message":"Invalid JSON primitive: _search.","StackTrace":"   at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()\r\n ......

Any solid ideas on why it doesn't work? I've spent days trying to get this to work this way. Although I can get it to work by doing an Ajax call and storing the data in a variable and setting that to the JQ Grid, I need direct web service calls from JQ GRid to be working for filtering and other things...

thanks in advance :)

Edit: - Using JQ Grid v4.3.2 - JSON data being sent to the Web Service has been validated using http://jsonlint.com/ (this is the variable "searchParams" in the javascript code above)

Answer 1

What you use inside of {} (see /*here*/) of the call

grid.jqGrid({/*here*/});

are jqGrid parameters or jqGrid options. It's wrong to use dataFilter here because jqGrid will just ignore the option. In the same way jqGrid don't know dataType option and it ignores dataType: 'json'. The default value of datatype (be careful with the case of letters) is 'xml'. Because JSON response from the server are wrong XML file you will get the error.

In the same way data parameter of jqGrid will by used in another way. You should use postData parameter instead. It's important to understand that you should create jqGrid with the code like grid.jqGrid({/*here*/}); once. So if you want that on paging, sorting or filtering the data the current values from the form "#searchForm" will be send to the server you should define formVars as function. See the answer for more details. If you use mtype: 'POST' then it will be probably easy to add formVars property inside of serializeGridData callback.

So you should rewrite your current code to about the following:

$(function () {
    var grid = $("#tblResults");
    grid.jqGrid({
        url: "./WebService/Service.asmx/doSearch",
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        serializeGridData: function (postData) {
            // extend the parameter which will be send to the server
            postData.formVars = $("#searchForm").serializeArray();
            // serialize the parameters as JSON string
            return JSON.stringify(postData);
        },
        datatype: 'json',
        mtype: 'POST',
        colNames:['Exam Date','Type','Name','UR Number','Pathology Type','Result Date','Modality', 'Results'],
        colModel:[
            {name:'resExamDate',index:'resExamDate', width:120},
            {name:'resType',index:'resType', width:60},
            {name:'name',index:'name', width:120},
            {name:'urnumber',index:'urnumber', width:65},
            {name:'resPathologyType',index:'resPathologyType', width:120},
            {name:'resResultDate',index:'resResultDate', width:120},
            {name:'resModality',index:'resModality', width:170,
                cellattr: function () {
                    return ' style="white-space: normal;"'
                }},
            {name:'results',index:'results', width:240,
                cellattr: function () {
                    return ' style="white-space: normal;"'
                }}
        ],
        rowNum: 10,
        rowList: [5, 10, 20],
        pager: '#pager',
        sortname: 'surname',
        viewrecords: true,
        sortorder: "desc",
        height: "100%",
        jsonReader: {
            root: function (obj) { return obj.d; },
            page: function () { return 1; },
            total: function () { return 1; },
            records: function (obj) { return obj.d.length; }
        }
    });
});

Additionally it seems that your server part don't implement paging of data. If it ignores all standard jqGrid parameters (rows,page,sidx,sord) you should confider to increase the value of rowNum to rowNum: 10000 for example, remove rowList and other pager information (see the documentation): pgbuttons: false, pginput: false. Additionally you can use

serializeGridData: function () {
    return JSON.stringify({formVars: $("#searchForm").serializeArray()});
}

In the case jqGrid will send only formVars to the server.

Answer 2

you need to include the expected parameter name of the web service like

var grid = $("#tblResults");
        grid.jqGrid({
            url: "./WebService/Service.asmx/doSearch",
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            data:{u0027formVars: searchParams},

the former code was successful because there the input param name was included

Answer 3

You need to pass the data like this:

function populateResults() {
var arForm = $("#searchForm").serializeArray();
var formvars = JSON.stringify(arForm);

$.ajax({
  type: "POST",
  url: "./WebService/Service.asmx/doSearch",
  data: "{'formVars':'" + formvars + "'}",
  contentType: "application/json",
  dataFilter: function(data) {
    var msg = eval('(' + data + ')');
    if (msg.hasOwnProperty('d'))
      return msg.d;
    else
      return msg;
  },
  success: function(msg) {
    // This will now output the same thing 
    //  across any current version of .NET.
    //console.log(msg.foo);
  }
});
};