[英]Unable to hide and show text boxes after refresh the page
我正在嘗試使用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">
</td>
<td align="left">
<asp:Button ID="Button1" class="btn-primary" runat="server" Text="Add"
Height="36px" Width="74px" onclick="Button1_Click" />
<asp:Button ID="Button2" class="btn-primary" runat="server" Text="Cancel"
Height="36px" Width="74px" PostBackUrl="~/districtDetails.aspx" />
</td>
</tr>
<tr>
<td class="style2">
</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>
顯示功能非常敏感。 嘗試這個:
$('#txtcomp,#txtfrom,#txtto').show();
這是因為您使用的是UpdatePanel
,它將刷新<ContentTemplate>
,在您的情況下,該文件中具有input[name="type"]
。
因為刷新了,所以on('click', function() {
不再將當前的radiobutton
與name="type"
綁定在一起,因此,使您在dropdown
選擇一項后再也不會觸發click
,您需要的是僅將您要刷新或更改的內容包裝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
使用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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.