一切正常,但当事件触发(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!
更多推荐
jQuery:div在回发时消失
发布评论