刷新页面后无法隐藏和显示文本框答案

【问题标题】：Unable to hide and show text boxes after refresh the page刷新页面后无法隐藏和显示文本框
【发布时间】：2014-11-30 13:32:24
【问题描述】：

我正在尝试使用 jquery 通过单选按钮隐藏和显示文本框。我可以显示和隐藏文本框，但错误是我有一个下拉列表。当我选择下拉值时，页面会刷新。页面刷新后，我无法隐藏和显示文本框。我有 ajax 的更新面板。为什么我无法在页面刷新后隐藏和显示文本框？这是我的源代码。请帮帮我。

<%@ Page Title="" Language="C#" MasterPageFile="~/Home.Master" AutoEventWireup="true" CodeBehind="ExperienceADD.aspx.cs" Inherits="Manjilas.WebForm31"%>
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
<head>
 <script src="Scripts2/jquery-1.7-vsdoc.js"></script>
 <script src="Scripts2/jquery-1.7.js"></script>
 <script src="Scripts2/jquery-1.7.min.js"></script>
 <script type="text/javascript">
        $(function () {
        $('input[name="type"]').on('click', function () {
        if ($(this).val() == 'Experienced') {
            $('#txtcomp').Show();
            $('#txtfrom').Show();
            $('#txtto').Show();

       } else {
       $('#txtcomp').hide();
            $('#txtcomp').hide();
            $('#txtfrom').hide();
            $('#txtto').hide();

        }
    });
   });
  </script>
  </head>    
  <div class="container-fluid">
<div class="row-fluid">
            <div class="well span5 center login-box">
                <div class="alert alert-info">
                <b><font size="4">ADD EXPERIENCE DETAILS</font></b>
                </div>
                <form id="form1" runat="server">

                <asp:UpdatePanel ID="updatepanel1" runat="server"><ContentTemplate>
                <div>
                    <ajaxToolkit:ToolkitScriptManager runat="server">
                    </ajaxToolkit:ToolkitScriptManager>

                  <asp:UpdatePanel ID="updatepanel2" runat="server"></asp:UpdatePanel>


                    <fieldset>

                        <table class="ui-accordion">
                        <tr>
                                <td align="left" class="style2">
                                    MachID</td>
                                <td align="left">
                              <%--   <div class="input-prepend" title="Select Country   Name">--%>
                                    <asp:DropDownList ID="ddid" runat="server" AutoPostBack="True" 
                                         onselectedindexchanged="ddid_SelectedIndexChanged"> 

                                    </asp:DropDownList>
                                </td>

                            </tr>
                              <tr>
                                <td align="left" class="style2">
                                    <asp:Label ID="Empcode" runat="server" Text="EmpCode"></asp:Label>
                                <td align="left">


                                    <asp:TextBox ID="txtname" runat="server"></asp:TextBox>
                                 </td>

                            </tr>

                                <tr>
                                <td align="left" class="style2">
                                </td>
                                <td align="left">
                                 <input type="radio" name="type" value="Fresher" />Fresher
                                 <input type="radio" name="type" value="Experienced" />Experienced
                                </td>
                            </tr>
                             <tr>
                                <td align="left" class="style2">
                                  Company</td>
                                <td align="left">
                                 <div class="input-prepend" title="Autogenerated District ID" data-rel="tooltip">
                                    <asp:TextBox ID="txtcomp" runat="server" TextMode="SingleLine"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td align="left" class="style2">
                                  From Date</td>
                                <td align="left">
                                 <div class="input-prepend" title="Enter District Name" data-rel="tooltip">
                                    <asp:TextBox ID="txtfrom" runat="server" TextMode="SingleLine"></asp:TextBox>
                                     <ajax:CalendarExtender ID="Calendarextender1" TargetControlID ="txtfrom" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender> 

                                </td>
                            </tr>
                            <tr>
                                <td align="left" class="style2">
                                  To Date</td>
                                <td align="left">
                                 <div class="input-prepend" title="Enter District Name" data-rel="tooltip">
                                    <asp:TextBox ID="txtto" runat="server" TextMode="SingleLine"></asp:TextBox>
                                     <ajax:CalendarExtender ID="Calendarextender2" TargetControlID ="txtto" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender> 

                                </td>
                            </tr>
      <tr>
                                <td class="style2">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    &nbsp; </td>
                                <td align="left">
                                  &nbsp;<asp:Button ID="Button1" class="btn-primary" runat="server" Text="Add" 
                                    Height="36px" Width="74px" onclick="Button1_Click" />
                                    &nbsp;&nbsp;&nbsp;
                                    <asp:Button ID="Button2" class="btn-primary" runat="server" Text="Cancel" 
                                    Height="36px" Width="74px" PostBackUrl="~/districtDetails.aspx" />
                                </td>
                            </tr>
                             <tr>
                                 <td class="style2">
                                     &nbsp;</td>
                                 <td align="left">
                                     <asp:Label ID="Label2" runat="server" ForeColor="Red"></asp:Label>
                                 </td>
                             </tr>
                        </table>
                        </div>
                        </ContentTemplate>
                        </asp:UpdatePanel>


                        </fieldset>
                </form>

            </div><!--/span-->
        </div><!--/row-->
        </div>
  </div>

  </asp:Content>

【问题讨论】：

刷新后有没有在控制台检查过JS错误？
Tiki-Web，没有怎么查？使用断点？？
第一个UpdatePanel 中的<asp:UpdatePanel ID="updatepanel2" runat="server"></asp:UpdatePanel> 是什么，你用UpdatePanel 做什么？
Kyojimaru，这些更新面板用于 ajax（页面刷新）
@Dwane 您在UpdatePanel 中究竟刷新或更改了什么？是否有任何元素value 将根据所选选项进行更改？

标签： c# jquery

【解决方案1】：

这是因为您使用的是UpdatePanel，它会刷新<ContentTemplate> 中的所有内容，在您的情况下，其中包含input[name="type"]。

因为它已刷新，on('click', function() { 不再将当前的radiobutton 与name="type" 绑定，因此使click 在您选择dropdown 中的一项后永远不会触发，您需要的是仅将 UpdatePanel 包装为您只想刷新或更改的内容，例如针对您的情况：

<asp:UpdatePanel ID="updatepanel1" runat="server">
    <ContentTemplate>
        <tr>
            <td align="left" class="style2">
                MachID
            </td>
            <td align="left">
                <asp:DropDownList ID="ddid" runat="server" AutoPostBack="True" 
                     onselectedindexchanged="ddid_SelectedIndexChanged"> 
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td align="left" class="style2">
                <asp:Label ID="Empcode" runat="server" Text="EmpCode"></asp:Label>
            </td>
            <td align="left">
                <asp:TextBox ID="txtname" runat="server"></asp:TextBox>
            </td>
        </tr>
    </ContentTemplate>
</asp:UpdatePanel>

其他方式

使用jQuery on click selector，你只需要改变

$('input[name="type"]').on('click', function () {
    if ($(this).val() == 'Experienced') {
        $('#txtcomp').show();
        $('#txtfrom').show();
        $('#txtto').show();
}

太

$('.ui-accordion').on('click', 'input[name="type"]', function () {
    if ($(this).val() == 'Experienced') {
        $('#txtcomp').show();
        $('#txtfrom').show();
        $('#txtto').show();
}

【讨论】：

现在它工作正常。但是由于移除了更新面板，下拉菜单需要更多时间来刷新页面和填充文本框数据
@Dwane，如果您删除 UpdatePanel，它会起作用，因为它将重新加载整个页面，这将再次调用 on click function。如果您不希望页面被视为已刷新，则最好坚持使用UpdatePanel，但如果用户看到页面正在刷新也可以，则可以不使用UpdatePanel。并且使用UpdatePanel时刷新页面的时间应该和不使用时一样或者更快（取决于你页面中的ViewState）

【解决方案2】：

show 函数是 k 敏感的。试试这个：

$('#txtcomp,#txtfrom,#txtto').show();

【讨论】：

刷新页面后无法显示/隐藏的根本原因是“$(...).Show is not a function”。 Jquery 不知道函数名称 Show.
再次抱歉同样的问题