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!

score 1 · Answer 1 · answered Dec 19 '11 at 21:58

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.

Hello Oleg! I tried to send the whole form data as search parameter in POST data and tried to get the same as strongly typed model in MVC controller. But i failed. Here is my post http://stackoverflow.com/questions/14522263/post-form-with-jqgrid-in-asp-net-mvc-3. It would be great help if you share your idea to achieve this? — Murali Murugesan, Jan 27 '13 at 11:37
@Murali: I have to make some urgent work for one my customer. Later I will try to read you question and I'll try to help you. Could you append your question with more details? For example the definition of `SearchViewModel` and the HTML fragment of the form with `id="search-form"`. Do you analysed with respect of [Fiddler](http://www.fiddler2.com/Fiddler2/version.asp), [Firebug](http://getfirebug.com/) or Developer Tools of IE or Chrome which exactly HTTP request was send to the server? You can include details of the request and the response with the error message too. — Oleg, Jan 27 '13 at 18:11
I have updated my question with the view model and form and other required information. I already seen my post request params using Firebug and i can retrieve it in controller as a JSON string by using Request["PostData"], but i how can i get it as strongly typed by just retrieving action method parameter viewModel, then viewModel.Name, etc? — Murali Murugesan, Jan 28 '13 at 05:10

jQgrid posting custom data on load

1 Answers1

Linked