jquery - how to reload jqgrid in asp.net mvc when i change dropdownlist

Question

what is wrong in this code? when i change drop down list,the grid takes old value of ddl only, not taken newely selected values why?

<%--<asp:Content ID="Content2script" ContentPlaceHolderID="HeadScript" runat="server">
 <script type="text/javascript">

     $(function() {
     $("#StateId").change(function() {
             $('#TheForm').submit();
         });
     });
     $(function() {
         $("#CityId").change(function() {
             $('#TheForm').submit();
         });
     });
     $(function() {
     $("#HospitalName").change(function() {
             $('#TheForm').submit();
         });
     });

  </script >
</asp:Content>--%>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
     <link rel="stylesheet" type="text/css" href="/scripts/themes/coffee/grid.css" 
      title="coffee" media="screen" />
    <script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.jqGrid.js" type="text/javascript"></script>
    <script src="/Scripts/js/jqModal.js" type="text/javascript"></script>
    <script src="/Scripts/js/jqDnR.js" type="text/javascript"></script>

  <script type="text/javascript">


      var gridimgpath = '/scripts/themes/coffee/images';
      var gridDataUrl = '/Claim/DynamicGridData/';




      jQuery(document).ready(function() {
          // $("#btnSearch").click(function() {
          var StateId = document.getElementById('StateId').value;
          var CityId = document.getElementById('CityId').value;
          var HName = document.getElementById('HospitalName').value;
//          alert(CityId);
//          alert(StateId);
//          alert(HName);
          if (StateId > 0 && CityId == '' && HName == '') {
              CityId = 0;
              HName = 'Default'.toString();
//              alert("elseif0" + HName.toString());
          }
          else if (CityId > 0 && StateId == '') {
//              alert("elseif1");
              alert("Please Select State..")
          }
          else if (CityId > 0 && StateId > 0 && HName == '') {
//              alert("elseif2");
              alert(CityId);
              alert(StateId);
              HName = "Default";
          }
          else {
//              alert("else");
              StateId = 0;
              CityId = 0;
              HName = "Default";

          }

          jQuery("#list").jqGrid({

              url: gridDataUrl + '?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName,

              datatype: 'json',
              mtype: 'GET',
              colNames: ['Id', 'HospitalName', 'Address', 'City', 'District', 'FaxNumber', 'PhoneNumber'],
              colModel: [{ name: 'HospitalId', index: 'HospitalId', width: 40, align: 'left' },
                               { name: 'HospitalName', index: 'HospitalName', width: 40, align: 'left' },
                               { name: 'Address1', Address: 'Address1', width: 300 },
                               { name: 'CityName', index: 'CityName', width: 100 },
                               { name: 'DistName', index: 'DistName', width: 100 },
                               { name: 'FaxNo', index: 'FaxNo', width: 100 },
                               { name: 'ContactNo1', index: 'PhoneNumber', width: 100 }
                            ],
              pager: jQuery('#pager'),
              rowNum: 10,
              rowList: [5, 10, 20, 50],
              // sortname: 'Id,',
              sortname: '1',
              sortorder: "asc",
              viewrecords: true,
              //multiselect: true,
              //multikey: "ctrlKey",
              // imgpath: '/scripts/themes/coffee/images',
              imgpath: gridimgpath,
              caption: 'Hospital Search',
              width: 700,
              height: 250


          });

          $(function() {
              // $("#btnSearch").click(function() {
          $('#CityId').change(function() {
          alert("kjasd");
                  // Set the vars whenever the date range changes and then filter the results
                  StateId = document.getElementById('StateId').value;
                  CityId = document.getElementById('CityId').value;
                  HName = 'default';

                 setGridUrl();
              });

              // Set the date range textbox values
              $('#StateId').val(StateId.toString());
              $('#CityId').val(CityId.toString());

              // Set the grid json url to get the data to display
               setGridUrl();
          });

          function setGridUrl() {

              alert(StateId);
              alert(CityId);
              alert("hi");
              var newGridDataUrl = gridDataUrl + '?StateId=' + StateId + '&CityId=' + CityId + '&hospname=' + HName;


              jQuery('#list').jqGrid('setGridParam', { url: newGridDataUrl }).trigger("reloadGrid");
          }
          //  });
      });

    </script> 

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%--<%using (Html.BeginForm("HospitalSearch", "Claim", FormMethod.Post, new { id = "TheForm" }))
--%>

   <table cellspacing="0" cellpadding="2" width="100%" border="0" >
        <tr>
            <td class ="Heading1">
                Hospital Search</td>
            <td class ="Heading1" align="right" width="50%" 
                    background="../images/homebg.gif">
               &nbsp;
            </td>
        </tr>
        <tr>
            <td colspan="2" >
               <% Html.RenderPartial("InsuredDetails"); %>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <table width="100%">
                    <tr>
                        <td class="subline" valign="middle">
                         State :  <% =Html.DropDownList("StateId", (SelectList)ViewData["States"], "--Select--", new { @class = "ddownmenu"  })%>  
                        &nbsp; City :  <% =Html.DropDownList("CityId", (SelectList)ViewData["Cities"], "--Select--", new { @class = "ddownmenu" })%>
                        &nbsp; Hospital Name :  <% =Html.TextBox("HospitalName")%>  &nbsp; 
                        &nbsp; <input id="btnSearch" type="submit" value="Search" />

                        </td>
                    </tr>
                </table>
            </td>
        </tr>   

        <tr>
            <td align="center" colspan="2">

        &nbsp;</td>
        </tr>
    </table>
        <div id="jqGridContainer">  
           <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
        </div>
</asp:Content>

Answer 1

you can just define

jQuery("#list").jqGrid({
    url: gridDataUrl,
    postData: {
        StateId: function() { return jQuery("#StateId option:selected").val(); },
        CityId: function() { return jQuery("#CityId option:selected").val(); },
        hospname: function() { return jQuery("#HospitalName").val(); }
    }
    // ...
});

and call trigger("reloadGrid") at change or click events.

I recommend you use current version of jqGrid from http://www.trirand.com/blog/?page_id=6 (don't forget select all modules which you need before download). For documentation see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs. You can use jQuery 1.4.2 with jQuery UI 1.8.1 with any of jQuery themes. jqGrid theme "coffee" is deprecated and gridimgpath you needs no more. Table "list" and div "pager" can be defined also just like

<table id="list"></table> 
<div id="pager"></div> 

see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid.