jQuery:div在回发时消失 [英] JQuery: div disappears on postback

问题描述

一切正常，但当事件触发(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在回发时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！