how to bind a form with jQgrid?

Question

I have a form with 3 text field and 2 combobox...I have send those data to server based on which my jqGrid will be populated...I can append the parameter like &text1=&text2& etc. Can someone point me towards an example based on binding form with jqGrid. Thanks!

UPdate1: my approach

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

     var url = "/cpsb/inventoryInquiry.do?method=getInventoryDetails" + $("#inventoryForm").serialize();

    navMenu();

  jQuery("#inventoryInq").jqGrid({
                    sortable:true,
                    url: '',
                    datatype:'json',
                 colNames:['LPN','SKU', 'Location Description', 'Location Type','Pallet Status','On Hand Quantity', 'Inducted Quantity','Rejected Qty','Hold?','Expiration Date' ], 
                 colModel:[  {name:'lpn',index:'lpn', width:85, sorttype:"int", align:"center", key:true},
                             {name:'sku',index:'sku', width:40, sorttype:"int", align:"center"},
                             {name:'locationDescription',index:'locationDescription', width:130, align:"center"},
                             {name:'locationType',index:'locationType', width:100, align:"center"}, 
                             {name:'palletStatus',index:'palletStatus', width:80, align:"center", sorttype:"int"},
                             {name:'onHandQuantity', index:'onHandQuantity',width:130, align:"center", sorttype:"int"},
                             {name:'inductedQuantity', index:'inductedQuantity', width:115, align:"center", sorttype:"int"},
                             {name:'rejectedQuantity', index:'rejectedQuantity', width:120, align:"center", sorttype:"int"},
                             {name:'hold',index:'hold', width:60,align:"center", sorttype:"int"},
                             {name:'expirationDate', index:'expirationDate',width:120, align:"center"} ],

               rowNum:10,
               rowList:[10,20,30],
               jsonReader : {repeatitems: false,
                    root: function(obj) {
                        return obj;
                    },
                    page: function (obj) { return 1; },
                    total: function (obj) { return 1; },
                    records: function (obj) { return obj.length; }
                },
               pager: '#pager',
               sortname: 'LPN',
               sortorder: "desc",
               loadonce:true,
               viewrecords: true,
               multiselect: true,
               caption: "Inventory Inquiry",
               height:230 
             }); 
          jQuery("#inventoryInq").jqGrid('navGrid','#pager',{view:true,add:false,edit:false,del:false, searchtext:'Filter'},{},{},{},{multipleSearch:true});
         jQuery("#inventoryInq").jqGrid('hideCol', 'cb');


  }) ;   

  $("form#inventoryForm").submit(function() {
        var newUrl = "/cpsb/inventoryInquiry.do?method=getInventoryDetails" + $(this).serialize();
        $("#inventoryInq").jqGrid("setGridParam","url", url).trigger("reloadGrid");
        return false;
    });


//]]>
</script>

Answer 1

The request that causes the grid to update needs to come from the grid, but what you can do is manipulate the request URL and then tell the grid to refresh. Something like:

var text1 = //get text1 from your form
var text2 = //get text2 from your form
var url = "http://www.mySite.com/gridRequestURL?text1=" + text1 + "&text2=" + text2;

$("#gridId").jqGrid("setGridParam", "url", url).trigger("reloadGrid");

An alternate approach would be to manipulate the POST data that the grid is sending with the request, using the Post Data module.

Answer 2

In general suggestion of JacobM is good, but there are some details.

First the textes text1 and text2 could contain a special symbols which are not allows in URL, so they should be better url-encoded and instead of + text1 + "&text2=" + text2 one should better use + encodeURIComponent(text1) + "&text2=" + encodeURIComponent(text2). The jQuery function jQuery.param() do this internaly, so instead of

var url = "http://www.mySite.com/gridRequestURL?text1=" + text1 + "&text2=" + text2;

we can use

var url="http://www.mySite.com/gridRequestURL?"+$.param({text1:text1, text2:text2});

Moreover jQuery has one more nice function to make encoding of all input fields (input and select fields and checkboxes) of one form: jQuery.serialize(). If you choose the names of the form parameters exactly like you want to have server parameters, then the new url can be just

var url = "http://www.mySite.com/gridRequestURL?" + $("#fpForm").serialize();

(where "fpForm" is id of the form) and the full code could looks like following

$("form#fpForm").submit(function() {
    var newUrl = "/cpsb/cPSBBusinessErrors.do?" + $(this).serialize();
    $("#gridId").jqGrid("setGridParam","url", url).trigger("reloadGrid");
    return false;
}

Take in consideration that, if you use postData parameter of jqGrid, the url will be automatically appended with the information from postData (target url will be combined from url and postData).

You can also consider to use only postData parameter, but as a function as described in http://stackoverflow.com/questions/2928371/how-to-filter-the-jqgrid-data-not-using-the-built-in-search-filter-box/2928819#2928819, then you should use only trigger("reloadGrid") without changing of url. The login of reading values from the form fields you should implement in the functions from postData.

If you use HTTP POST (mtype: "POST") and not default GET you can set postData parameter with the same information as described above instead of appending the information to the url parameter.