JQuery: div disappears on postback

Question

everything works great except that when event fire (btnSearch_click) the control (txtSubject, or dates or ddlStatus, depends on what i have selected from the dropdonlist) disappears...

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 your btnSearch's click event is fired, you're doing a full postback back to the server. As a result, your ASPX page is getting rendered based on how you have it defined in the ASPX page above. In this case, div_date, div_status, and div_subject are rendered with a display of none. And your select list will reset to the default item (which would be the first ListItem).

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

You may want to have a hidden input element who's value you set in each if {} statement in your JavaScript's .change() handler. If that hidden value is set to runat="server", then you can more easily get it's value on the server during your Page_Load and then set the right visibility of your div's (although those div's will also have to be runat="server" unless you render them dynamically.

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

and your JavaScript would have...

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

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

I think you could also change your div_date, div_status and div_subject to asp:Panel's and I think their state (visible or not) will be kept in viewstate and be preserved on a postback. I'm not 100% sure of that, but that could be an easier test to try out before the hidden input control.

Something else to consider is if the btnSearch click event is to keep the user on the same page, maybe you could wire up the btnSearch's click event to a jQuery $.ajax() call to do an async post to the server to do your work and keep your UI untouched by a postback. You could do this:

$("#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 kind of long. Hope this helps!