JQuery: div disappears on postback

Question

everything works fine, except that when the event fires (btnSearch_click), the control disappears (txtSubject, or dates or ddlStatus, depending on what I chose from dropdonlist) ...

here is my code ...:

<script type="text/javascript"> $(document).ready(function() { $('.ddlFilter').change(function() { var sel = $(this).val(); $('#div_date').hide(); $('#div_subject').hide(); $('#div_status').hide(); if (sel === 'Date') { $('#div_date').show(); } else if (sel == 'Subject') { $('#div_subject').show(); } else if (sel == 'Status') { $('#div_status').show(); } }); }); </script> <div id="select"> Filter Results by: <asp:DropDownList CssClass="ddlFilter" ID="ddlFilterResultBy" runat="server" Width="221px"> <asp:ListItem Text="Select..." Value=""></asp:ListItem> <asp:ListItem Text="Date" Value="Date"></asp:ListItem> <asp:ListItem Text="Subject" Value="Subject"></asp:ListItem> <asp:ListItem Text="Status" Value="Status"></asp:ListItem> </asp:DropDownList> </div> <div id="holder"> <div id="div_date" style="width: 250px; display: none;" class="sectionrowDate"> Date Range: <uc1:DatePicker ID="dpFromDate" runat="server" /> <uc1:DatePicker ID="dpToDate" runat="server" /> </div> <div id="div_subject" style="display: none;" class="sectionrow"> Subject: <asp:TextBox ID="txtSubject" runat="server" Width="225px" SkinID="Picker"></asp:TextBox> </div> <div id="div_status" style="display: none;" class="sectionrow"> Status: <asp:DropDownList DataSourceID="ods_status" DataValueField="Id" DataTextField="Name" AppendDataBoundItems="true" ID="ddlStatus" runat="server" Width="152px"> </asp:DropDownList> </div> </div> <asp:Button ID="btnSearch" Text="Search" runat="server" OnClick="btnSearch_Click" /> </div> 

Answer 1

When you btnSearch click event, you make a full return back to the server. As a result, your ASPX page gets rendered based on how you defined it on the ASPX page above. In this case, div_date , div_status and div_subject displayed with a none display. And your select list will reset for the default item (which will be the first ListItem).

You need to keep track of what is visible and what is selected before the postback, if you want to keep the same behavior (full postback). I have a few thoughts on how to handle this.

You might want to have a hidden input element whose value you set in each if {} expression in your JavaScript .change() handler. If this hidden value is set to runat="server" , you can more easily get its value on the server during your Page_Load , and then set the correct visibility of your div (although those runat="server" should also be runat="server" if you don’t visualize them dynamically.

 <input type="hidden" id="hidCriteria" runat="server" /> 

and your JavaScript will have ...

 $("#hidCriteria").val("DATE"); //or "STAT" or "SUBJ" depending on what selected 

in each if(sel == 'xxx') section if(sel == 'xxx') to keep track of what is visible.

I think you can also change div_date, div_status and div_subject to asp: Panel, and I think that their state (visible or not) will be stored in viewstate and saved in the postback. I'm not 100% sure, but it might be a simpler test to try it out before hidden input control.

Something else needs to be considered if the btnSearch click btnSearch is to save the user on one page, maybe you can associate the btnSearch click event with a jQuery $.ajax() call to make asynchronous write to the server to do its job and save your user interface without postback. You can do it:

 $("#btnSearch").click(function() { $.ajax({ url: 'myService.svc/DoSearch', //url you're posting to, type: 'POST', dataType: 'json', //up to you...could be 'xml', 'text', etc. data: { //your search criteria here }, ... }); }); 

Sorry if this was a long time. Hope this helps!