jquery - jQgrid posting custom data on load

Question

Wondering if anyone has used jQgrid to post dynamic data from another form on the same page. Dynamic in that I don't know the input names to post, but would rather just post the whole serialized form when rendering the grid.

I gotten as far as setting the extra data in postData, but it doesn't get passed in the url properly, as it appears double url-encoded. See:

$(document).ready(function() {
  $("#rpt").jqGrid( 
  { url:'/get.json',
   postData: {filter: $('form').serialize()}, 
  datatype: "json", 
  gridview: true,
  colModel:[id:'col1']
 });
});

Through various threads here and on other sites, I've tried the suggested JSON.stringify and serializearray() on the form, as well as custom functions to no avail. The form data appears encoded and is not available on the other side via _GET.

Any suggestions would be great - thanks!

Answer 1

I am not sure in which form you want to get the data from the form on the server side. Nevertheless I would suggest you to use postData in the following form

postData: {
    filter: function () {
        var result = {}, i, item,
            formInfo = $('form#myForm').serializeArray(),
            l = formInfo.length;
        for (i = 0; i < l; i++) {
            item = formInfo[i];
            result[item.name] = item.value;
        }

        return JSON.stringify(result);
    }
}

In case of the following test form

<form id="myForm">
  <div><input type="text" name="a" value="1 from a" id="a" /></div>
  <div><input type="text" name="b" value="2 from b" id="b" /></div>
  <div><input type="hidden" name="c" value="3 from c" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f" />
  </div>
</form>

The result variable will be

var result = {
    a: "1 from a",
    b: "2 from b",
    c: "3 from c",
    d: "4",
    e: "5"
}

So no conversion of the data will be done. Then I suggest to convert object result to JSON string using JSON.stringify. (Depend on the server code it could be not needed.) So the filters parameter will be sent as

{"a":"1 from a","b":"2 from b","c":"3 from c","d":"4","e":"5"}

You can use Fiddler or Firebug to examine the HTTP traffic of the corresponding small demo.