jQuery:div在回发时消失

本文介绍了jQuery:div在回发时消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

一切正常，但当事件触发(btnSearch_click)时，控件(txtSubject，日期或ddlStatus取决于我从dropdonlist中选择的内容)消失了……

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...

这是我的代码...:

<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>

推荐答案

当您触发btnSearch的click事件时，您将进行完整的回发到服务器.结果，将根据您在上面的ASPX页中定义的方式呈现ASPX页.在这种情况下，div_date，div_status和div_subject将不显示任何内容.并且您的选择列表将重置为默认项目(将是第一个ListItem).

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.

您可能想要一个隐藏的输入元素，该元素的值是您在JavaScript的.change()处理程序中的每个if {}语句中设置的.如果该隐藏值设置为runat="server"，那么您可以在Page_Load期间更轻松地在服务器上获取它的值，然后设置div的正确可见性(尽管这些div也必须是runat="server"，除非您动态呈现它们.

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" />

您的JavaScript将会...

and your JavaScript would have...

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

在每个if(sel == 'xxx')部分中

以便跟踪可见的内容.

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

我认为您也可以将div_date，div_status和div_subject更改为asp:Panel，并且我认为它们的状态(可见或不可见)将保留在viewstate中并保留在回发中.我不是100％确信这一点，但这可能是在隐藏的输入控件之前更容易尝试的测试.

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.

还有其他需要考虑的问题，如果btnSearch click事件是为了使用户保持在同一页面上，也许您可​​以将btnSearch的click事件连接到jQuery $.ajax()调用，以将异步帖子发送到服务器以做您的工作，并保持用户界面不受回发的影响.您可以这样做:

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!