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>

It seems to me that you should add '&' after `?method=getInventoryDetails` in both places (`var url` and `var newUrl`). — Oleg, Sep 08 '10 at 15:33
Thanks! but when I am using $("#inventoryForm").serialize()..doesn't it append &? — paul, Sep 08 '10 at 19:27
Look at the example from http://api.jquery.com/serialize/. `$.serialize()` build the string like `a=1&b=2&c=3&d=4&e=5` and **not** the string `&a=1&b=2&c=3&d=4&e=5`. So you if you manually construct `url` you have to add '&' after `?method=getInventoryDetails`. If you use both `url` **and** `postData` like `$("#inventoryInq").jqGrid("setGridParam", {url: "/cpsb/inventoryInquiry.do?method=getInventoryDetails", postData: $(this).serialize()})` then `jQuery` receive two separate parameter and it make concatenation. So `jQuery` are able to include '&' between. — Oleg, Sep 08 '10 at 20:19
By the way in you current code inside of `$("form#inventoryForm").submit` there are a small error: instead of `$("#inventoryInq").jqGrid("setGridParam","url", url)` you should write `$("#inventoryInq").jqGrid("setGridParam",{"url": url})` or `$("#inventoryInq").jqGrid("setGridParam",{url: url})` — Oleg, Sep 08 '10 at 20:23
@Oleg Thanks! I have one more issue when I am sending data with no values inserted it is sending null instead of blank ...using .serialize()...is there a work around to send blank instead of null? — paul, Sep 08 '10 at 20:49

score 3 · Accepted Answer · edited May 23 '17 at 12:01

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 How to filter the jqGrid data NOT using the built in search/filter box, 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.

I have updated my question with your approach...can I do like that? — paul, Sep 08 '10 at 14:47

how to bind a form with jQgrid?

1 Answers1