title: Binding to gridview on button click using jquery/ajax
body: <p>I have the following aspx controls on my page:</p>
  
  <p>1- GridView:</p>
  
  <pre><code>&lt;asp:GridView ID="GridView4" runat="server" AutoGenerateColumns="False"&gt;
  &lt;Columns&gt;
      &lt;asp:BoundField DataField="StartDate" HeaderText="Date" /&gt;
      &lt;asp:BoundField DataField="Title" HeaderText="Event" /&gt; 
      &lt;asp:BoundField DataField="Name" HeaderText="Contact Name" /&gt;
      &lt;asp:BoundField DataField="Cell" HeaderText="Contact #" /&gt;
      &lt;asp:BoundField DataField="EventType" HeaderText="Type" /&gt;
      &lt;asp:BoundField DataField="Confirmed" HeaderText="Status" /&gt;
      &lt;asp:BoundField DataField="Comments" HeaderText="Comments" /&gt;
  &lt;/Columns&gt;
  </code></pre>
  
  <p></p>
  
  <p>2- Text Box ( Start Date )</p>
  
  <pre><code>&lt;asp:TextBox id="startDate" class="form-control" runat="server"&gt;&lt;/asp:TextBox&gt;
  </code></pre>
  
  <p>3- DropDownList ( Event Type )</p>
  
  <pre><code>&lt;asp:DropDownList ID="eventType" class="form-control" runat="server"&gt;
      &lt;asp:ListItem Enabled="true" Text="Select Event" Value="-1"&gt;&lt;/asp:ListItem&gt;
      &lt;asp:ListItem Text="Performance" Value="Performance"&gt;&lt;/asp:ListItem&gt;
      &lt;asp:ListItem Text="Promotion" Value="Promotion"&gt;&lt;/asp:ListItem&gt;
      &lt;asp:ListItem Text="Rehersal" Value="Rehersal"&gt;&lt;/asp:ListItem&gt;
      &lt;asp:ListItem Text="Miscellaneous" Value="Miscellaneous"&gt;&lt;/asp:ListItem&gt;
  &lt;/asp:DropDownList&gt;
  </code></pre>
  
  <p>4- Button ( Filter Events )</p>
  
  <pre><code>&lt;asp:Button ID="filterEvents" Text="Filter Events" runat="server" /&gt;
  </code></pre>
  
  <p>I want to update the GridView on button click. Based on the values of textbox(startDate) and dropdownlist(eventType) a query is made in my WebMethod and called to retrieve data from database.</p>
  
  <p>This is my script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      //Add event handler.
      $("body").on("click", "[id*=filterEvents]", function () {
          var startDate = $("[id*=startDate]");
          var eventType = $("[id*=eventType]");
          $.ajax({
              type: "POST",
              url: "ArtistDashboard.aspx/GetEventsWithFilters",
              data: '{str_startDate: "' + startDate.val() + '", str_eventType: "' + eventType.val() + '" }',
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (response) {
                  var xmlDoc = $.parseXML(response.d);
                  var xml = $(xmlDoc);
                  var customers = xml.find("Table");
                  var row = $("[id*=GridView4] tr:last-child").clone(true);
                  $("[id*=GridView4] tr").not($("[id*=GridView4] tr:first-child")).remove();
                  $.each(customers, function () {
                      var customer = $(this);
                      $("td", row).eq(0).html($(this).find("StartDate").text());
                      $("td", row).eq(1).html($(this).find("Title").text());
                      $("td", row).eq(2).html($(this).find("Name").text());
                      $("td", row).eq(3).html($(this).find("Cell").text());
                      $("td", row).eq(4).html($(this).find("EventType").text());
                      $("td", row).eq(5).html($(this).find("Confirmed").text());
                      $("td", row).eq(6).html($(this).find("Comments").text());
                      $("[id*=GridView4]").append(row);
                      row = $("[id*=GridView4] tr:last-child").clone(true);
                  });
              }
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my WebMethod:</p>
  
  <pre><code>[WebMethod(EnableSession = true)]
      public static string GetEventsWithFilters(string str_startDate, string str_eventType)
      {
          string artId = (string)HttpContext.Current.Session["artID"];
          string query = null;
  
          if (str_startDate == null &amp;&amp; str_eventType == "-1")
          {
              query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'";
          }
          else if (str_startDate == null &amp;&amp; str_eventType == "Performance")
          {
              query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND EventType = 'Performance' ";
          }
          else if (str_startDate == null &amp;&amp; str_eventType != "Promotion")
          {
              query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND EventType = 'Promotion' ";
          }
          else if (str_startDate == null &amp;&amp; str_eventType != "Rehersal")
          {
              query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND EventType = 'Rehersal' ";
          }
          else if (str_startDate != null &amp;&amp; str_eventType == "-1")
          {
              query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND StartDate &gt;= '" + str_startDate + "'";
          }
          else if (str_startDate != null &amp;&amp; str_eventType == "Performance")
          {
              query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND StartDate &gt;= '" + str_startDate + "'AND EventType = 'Performance' ";
          }
          else if (str_startDate != null &amp;&amp; str_eventType == "Promotion")
          {
              query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND StartDate &gt;= '" + str_startDate + "'AND EventType = 'Promotion' ";
          }
          else if (str_startDate != null &amp;&amp; str_eventType == "Rehersal")
          {
              query = "SELECT Event.StartDate, Event.Title, Contact.Name, Contact.Cell, Event.EventType, Event.Confirmed, Event.Comments FROM Event INNER JOIN Contact ON Event.ContactID=Contact.ID WHERE ArtistID ='" + artId + "'AND StartDate &gt;= '" + str_startDate + "'AND EventType = 'Rehersal' ";
          }
  
          SqlCommand cmd = new SqlCommand(query);
          return GetDataWithFilters(cmd).GetXml();
      }
  
      private static DataSet GetDataWithFilters(SqlCommand cmd)
      {
          string myConnection = @"Data Source=REDDEVIL;Initial Catalog=ArtistManagementSystem;Persist Security Info=True; User ID=sa;Password=fastian123;MultipleActiveResultSets=True;Application Name=EntityFramework";
          using (SqlConnection con = new SqlConnection(myConnection))
          {
              using (SqlDataAdapter sda = new SqlDataAdapter())
              {
                  cmd.Connection = con;
                  sda.SelectCommand = cmd;
                  using (DataSet ds = new DataSet())
                  {
                      sda.Fill(ds);
                      return ds;
  
                  }
              }
          }
      }
  </code></pre>
  
  <p>The problem is that the GridView is not displaying any rows. What am I doing wrong? I know there can be a lot of problems with my code because this is my first time using jQuery/Ajax. There are bad programming practices in my code as well, But guys please be generous and point me in the right direction. I will be really greatful.</p>