loading a JqGrid on selecting date

Question

I have a datepicker and on selecting the date and clicking button it should display the grid beneath it ...

my approach:

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function(){
        $("#datepicker").datepicker({
            showOn:'button',
            buttonImage: '../../image/icon_cal.png',
            buttonImageOnly:true
        });

        jQuery(".submit").click(function(){
            var btnClick = jQuery("#businessError").jqGrid('setGridParam',
              {url:"/cpsb/cPSBBusinessErrors.do?method=getBusinessErrors"});
        });

        jQuery("#businessError").jqGrid({
            sortable:true,
            url: '/cpsb/cPSBBusinessErrors.do?method=getBusinessErrors',
            datatype:'json',
            colNames:['Error Number','Error Message','Created date','Created User',
                      'Last Modified Date','Last Modified User'], 
            colModel:[
                { name:'errorNumber',index:'errorNumber', width:80, sorttype:"int",
                  align:"center", key:true },
                { name:'errorMessage',index:'errorMessage', width:280,
                  sorttype:"text", align:"center" },
                { name:'createdDate',index:'createdDate', width:180,
                  sorttype:"text", align:"center" },
                { name:'createdUser',index:'createdUser', width:180,
                  sorttype:"text", align:"center" },
                { name:'lastModifiedDate',index:'lastModifiedDate',
                  width:180, sorttype:"text", align:"center" },
                { name:'lastModifiedUser',index:'lastModifiedUser',
                  width:180, sorttype:"text", 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: '#businessErrorpager',
            sortname: 'SKU',
            sortorder: "desc",
            loadonce:true,
            viewrecords: true,
            caption: "Business Errors"
          }); 
        jQuery("#businessError").jqGrid('navGrid',
                                        {view:true,add:false,edit:false,del:false});
    });
//]]>
</script>

html markup:

<div id="header"><jsp:include page="../menu_v1.jsp"/></div>
<div id="mainContent">
  <div id="business_form">
    <form class="dateform" id="date" method="post"
          action="/businessError.do?method=getBusinessErrors">
    <fieldset class="ui-widget ui-widget-content ui-corner-all">
    <legend class="ui-widget ui-widget-header ui-corner-all">Business Error</legend>
      <p>
        <label for="spogname">Select Date:</label>
        <input type="text" id="datepicker"/>
      </p>
      <p>
        <button class="submit" type="submit">Submit</button>
      </p>
    </fieldset>
    </form>

    <div class="business">
      <table id="businessError"><tr><td></td></tr></table> 
      <div id="businessErrorpager"></div>
    </div>
  </div>
</div>

Answer 1

It I understand your question correct you should use additional parameters on the server to construct the query filling the jqGrid: startingDate, date, endDate or sothething like that. If the user choose the data in datepicker you can use setGridParam to set this additional date parameter as a part of URL or as a part of postData parameter of jqGrid and start trigger('reloadGrid'). In general all can work exactly like another external "filter" (see How to filter the jqGrid data NOT using the built in search/filter box).

UPDATED: It seems to me that the work with datapicker could be a little more simple and without having a form with one more button. You can replace to the following markup

<fieldset>
<input type="text" id="datepicker"/>
</fieldset>

and as a JavaScript code

$("#datepicker").datepicker({
    showOn:'button'/*,
    buttonImage: '../../image/icon_cal.png',
    buttonImageOnly:true*/
}).bind('change', function(e) {
    var d = e.target.value;
    $("#businessError").jqGrid('setGridParam',
              { url: "/cpsb/cPSBBusinessErrors.do",
                postData: {
                    method: "getBusinessErrors",
                    date: d
                },
                page: 1
              }).trigger("reloadGrid");
});

You server component which listen "/cpsb/cPSBBusinessErrors.do" should read an additional parameter "date" which will be the date value from the "datepicker" control. It should send back the data filtered by the data.