I put a checkbox 'Check All', and my code only works first all check and all uncheked. After that none of the checked box follows the attribute of the checkbox of 'Check All'
<script type="text/javascript">
$(function () {
$('#chkAll').click(function () {
$('#divChk .chk input:checkbox').attr('checked', function () {
return $('#chkAll').prop('checked');
});
});
});
</script>
<body>
<form id="form1" runat="server">
<div class="bigDiv">
<asp:CheckBox ID="chkAll" runat="server" Text="Check All" /><br />
<div id="divChk">
<asp:CheckBox ID="CheckBox1" runat="server" Text="1" CssClass="chk" /><br />
<asp:CheckBox ID="CheckBox2" runat="server" Text="2" CssClass="chk" /><br />
<asp:CheckBox ID="CheckBox3" runat="server" Text="3" CssClass="chk" /><br />
<asp:CheckBox ID="CheckBox4" runat="server" Text="4" CssClass="chk" /><br />
</div>
</div>
</form>
</body>
Try this and see if this works.
$('#chkAll').change(function () {
$('#divChk input:checkbox').prop('checked',this.checked);
});
Related
So i want to make a drop down list that displays new information if you select different radio buttons.
And im struggling.For Example if radio button 1 is selected the information in dropbox must change to popcorn and sweets.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
margin-left: 18px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButton ID="RadioButton1" runat="server" OnCheckedChanged="RadioButton1_CheckedChanged" Text="Day" />
</div>
<asp:RadioButton ID="RadioButton2" runat="server" Text="Night" />
<br />
<br />
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>Cream Soda</asp:ListItem>
<asp:ListItem>coke</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" CssClass="auto-style1" Width="139px"></asp:TextBox>
<br />
<asp:Label ID="Label2" runat="server" Text="Seat No:"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" Width="140px"></asp:TextBox>
<br />
<br />
<asp:Button ID="Button1" runat="server" Height="20px" Text="Add Choice" />
<br />
<asp:Label ID="Label3" runat="server"></asp:Label>
</form>
</body>
</html>
You must define autopostback="true" on the RadioButton, and then you need to handle the selected value in the codebehind, and re-fill the drop-down with a new item-list.
Page-Cycle will be like this
Page_Load
RadioButton2_Changed
Page_LoadComplete
So make sure you either set the new content in RadioButton2_Changed, or in Page_LoadComplete. If you try to do it in Page_Load, you'll have the old value of radiobutton, and that will not work well ...
You can try the following steps to show the correspond information when you click the radio button.
First, you need to change your html file into the following:
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButton ID="RadioButton1" runat="server" OnCheckedChanged="RadioButton1_CheckedChanged" Text="Day" GroupName="Ra" AutoPostBack="true" />
</div>
<asp:RadioButton ID="RadioButton2" runat="server" Text="Night" OnCheckedChanged="RadioButton2_CheckedChanged" GroupName="Ra" AutoPostBack="true"/>
<br />
<br />
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" CssClass="auto-style1" Width="139px"></asp:TextBox>
<br />
<asp:Label ID="Label2" runat="server" Text="Seat No:"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" Width="140px"></asp:TextBox>
<br />
<br />
<asp:Button ID="Button1" runat="server" Height="20px" Text="Add Choice" />
<br />
<asp:Label ID="Label3" runat="server"></asp:Label>
</form>
</body>
Second, you need to call the RadioButton1_CheckedChanged event and RadioButton2_CheckedChanged event to to add the listitem.
ListItem list1 = new ListItem("popcorn");
ListItem list2 = new ListItem("sweets");
ListItem list3 = new ListItem("Cream Soda");
ListItem list4 = new ListItem("coke");
protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
{
if(RadioButton1.Checked==true)
{
if (!DropDownList1.Items.Contains(list1) && !DropDownList1.Items.Contains(list2))
{
DropDownList1.Items.Clear();
DropDownList1.Items.Add(list1);
DropDownList1.Items.Add(list2);
}
}
}
protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
{
if (RadioButton2.Checked == true)
{
if (!DropDownList1.Items.Contains(list3) && !DropDownList1.Items.Contains(list4))
{
DropDownList1.Items.Clear();
DropDownList1.Items.Add(list3);
DropDownList1.Items.Add(list4);
}
}
}
Result:
I am using 4 Modalpopupextender in my start-up page of my project. When I run my start-up page, the panels which I have set under PopupControlID in Modalpopupextender are visible even before the specified TargetControlID is clicked. I have tried to set visible of those to false but it dint helped me and I also tried to create a css class to hide a panel when page is loaded and to view the panel when specified button is clicked but it neither helped me. Please help. Thank you.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type = "text/css">
.hidePanel
{
display:none;
}
.showpanel
{
display : block;
}
.panel
{
background : gray;
padding : 10px;
}
div ul ul
{
display: none;
}
div ul li:hover > ul
{
display: block;
}
div ul li ul:hover > ul
{
display: block;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:modalpopupextender ID="Modalpopupextender1" CancelControlID = "Button8" TargetControlID = "Button2" PopupControlID = "StaffSP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender2" CancelControlID = "Button10" TargetControlID = "Button3" PopupControlID = "StaffFP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender3" CancelControlID = "Button12" TargetControlID = "Button5" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
<asp:modalpopupextender ID="Modalpopupextender4" CancelControlID = "Button14" TargetControlID = "Button6" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="XX-Large" Text="Automated Examination System"></asp:Label><br /> <br /><br />
<asp:Panel ID = "Main" runat = "server" Height="181px" Width="275px">
<ul>
<li style="margin-removed 33px; width: 169px;"> <asp:LinkButton ID = "LinkAdmin" runat = "server" onclick="LinkAdmin_Click">Coordinator</asp:LinkButton></li>
<li style="width: 172px; margin-removed 33px"> <asp:LinkButton ID="LinkStaff" runat="server" onclick="LinkStaff_Click">Staff</asp:LinkButton></li>
<li style="margin-removed 33px"> <asp:LinkButton ID = "LinkStudent" runat = "server">Student</asp:LinkButton>
<ul>
<li><asp:LinkButton ID = "LinkButton1" runat = "server">Fresh Registration</asp:LinkButton></li>
<li><asp:LinkButton ID = "LinkButton2" runat = "server">Re Registration</asp:LinkButton></li>
</ul>
</li>
</ul>
</asp:Panel>
</div>
<asp:Panel ID="StaffLogin" runat="server" Height="59px"
style="z-index: 1; left: 302px; top: 112px; position: absolute; height: 59px; width: 275px"
Visible="False" Width="275px">
Staff<br />
<asp:Button ID="Button1" runat="server" Text="Login" />
<asp:Button ID="Button2" runat="server" Text="New Staff" />
<asp:Button ID="Button3" runat="server" Text="Fogot Password" />
</asp:Panel>
<asp:Panel ID="AdminLogin" runat="server"
style="z-index: 1; left: 302px; top: 193px; position: absolute; height: 78px; width: 275px"
Visible="False" Width="275px">
Admin<br />
<asp:Button ID="Button4" runat="server" Text="Login" />
<asp:Button ID="Button5" runat="server" Text="New Admin" />
<asp:Button ID="Button6" runat="server" Text="Forgot Password" />
</asp:Panel>
<asp:Panel ID="StaffSP" runat="server" Height="48px" Width="274px">
Staff SP<br />
<asp:Button ID="Button7" runat="server" Text="Button" />
<asp:Button ID="Button8" runat="server" Text="Cancel" />
</asp:Panel>
<asp:Panel ID="StaffFP" runat="server" Height="48px" Width="274px">
Staff FP<br />
<asp:Button ID="Button9" runat="server" Text="Button" />
<asp:Button ID="Button10" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminSP" runat="server" Height="48px" Width="274px">
Admin SP<br />
<asp:Button ID="Button11" runat="server" Text="Button" />
<asp:Button ID="Button12" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminFP" runat="server" Height="48px" Width="274px">
AdminFP<br />
<asp:Button ID="Button13" runat="server" Text="Button" />
<asp:Button ID="Button14" runat="server" Text="Cancel" />
</asp:Panel>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class TrailPopup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LinkAdmin_Click(object sender, EventArgs e)
{
AdminLogin.Visible = true;
StaffLogin.Visible = false;
}
protected void LinkStaff_Click(object sender, EventArgs e)
{
AdminLogin.Visible = false;
StaffLogin.Visible = true;
}
}
EDIT :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type = "text/css">
.hidePanel
{
display:none;
}
.showpanel
{
display : block;
}
.panel
{
background : gray;
padding : 10px;
}
div ul ul
{
display: none;
}
div ul li:hover > ul
{
display: block;
}
div ul li ul:hover > ul
{
display: block;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="XX-Large" Text="Automated Examination System"></asp:Label><br /> <br /><br />
<asp:Panel ID = "Main" runat = "server" Height="181px" Width="275px">
<ul>
<li style="margin-left: 33px; width: 169px;"> <asp:LinkButton ID = "LinkAdmin" runat = "server" onclick="LinkAdmin_Click">Coordinator</asp:LinkButton></li>
<li style="width: 172px; margin-left: 33px"> <asp:LinkButton ID="LinkStaff" runat="server" onclick="LinkStaff_Click">Staff</asp:LinkButton></li>
<li style="margin-left: 33px"> <asp:LinkButton ID = "LinkStudent" runat = "server">Student</asp:LinkButton>
<ul>
<li><asp:LinkButton ID = "LinkButton1" runat = "server">Fresh Registration</asp:LinkButton></li>
<li><asp:LinkButton ID = "LinkButton2" runat = "server">Re Registration</asp:LinkButton></li>
</ul>
</li>
</ul>
</asp:Panel>
</div>
<asp:Panel ID="StaffLogin" runat="server" Height="59px"
style="z-index: 1; left: 302px; top: 112px; position: absolute; height: 59px; width: 275px"
Visible="False" Width="275px">
Staff<br />
<asp:Button ID="Button1" runat="server" Text="Login" />
<asp:Button ID="Button2" runat="server" Text="New Staff" />
<asp:Button ID="Button3" runat="server" Text="Fogot Password" />
</asp:Panel>
<asp:Panel ID="AdminLogin" runat="server" style="left: 302px; top: 193px; position: absolute; height: 78px; width: 275px" Visible="False" Width="275px">Admin<br />
<asp:Button ID="Button4" runat="server" Text="Login" />
<asp:Button ID="Button5" runat="server" Text="New Admin" />
<asp:Button ID="Button6" runat="server" Text="Forgot Password" />
</asp:Panel>
<asp:Panel ID="StaffSP" Visible = "false" runat="server" Height="48px" Width="274px">
Staff SP<br />
<asp:modalpopupextender ID="Modalpopupextender1" CancelControlID = "Button8" TargetControlID = "Button2" PopupControlID = "StaffSP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button7" runat="server" Text="Button" />
<asp:Button ID="Button8" runat="server" Text="Cancel" />
</asp:Panel>
<asp:Panel ID="StaffFP" Visible = "false" runat="server" Height="48px" Width="274px">
Staff FP<br />
<asp:modalpopupextender ID="Modalpopupextender2" CancelControlID = "Button10" TargetControlID = "Button3" PopupControlID = "StaffFP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button9" runat="server" Text="Button" />
<asp:Button ID="Button10" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminSP" Visible = "false" runat="server" Height="48px" Width="274px">
Admin SP<br />
<asp:modalpopupextender ID="Modalpopupextender4" CancelControlID = "Button14" TargetControlID = "Button6" PopupControlID = "AdminSP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button11" runat="server" Text="Button" />
<asp:Button ID="Button12" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminFP" Visible = "false" runat="server" Height="48px" Width="274px">
AdminFP<br />
<asp:modalpopupextender ID="Modalpopupextender3" CancelControlID = "Button12" TargetControlID = "Button5" PopupControlID = "AdminFP" runat="server"></asp:modalpopupextender>
<asp:Button ID="Button13" runat="server" Text="Button" />
<asp:Button ID="Button14" runat="server" Text="Cancel" />
</asp:Panel>
</form>
</body>
</html>
Call your css class hide panel in every PopupControl used for modalpopupextender control:
`<asp:Panel ID="StaffSP" runat="server" CssClass="hide" Height="48px" Width="274px" >
Staff SP<br />
<asp:Button ID="Button7" runat="server" Text="Button" />
<asp:Button ID="Button8" runat="server" Text="Cancel" />
</asp:Panel>
<asp:Panel ID="StaffFP" runat="server" Height="48px" Width="274px" style="display:none;">
Staff FP<br />
<asp:Button ID="Button9" runat="server" Text="Button" />
<asp:Button ID="Button10" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminSP" runat="server" Height="48px" Width="274px" CssClass="hidePanel">
Admin SP<br />
<asp:Button ID="Button11" runat="server" Text="Button" />
<asp:Button ID="Button12" runat="server" Text="Cancel" />
<br />
<br />
</asp:Panel>
<asp:Panel ID="AdminFP" runat="server" Height="48px" Width="274px" Visible="false">
AdminFP<br />
<asp:Button ID="Button13" runat="server" Text="Button" />
<asp:Button ID="Button14" runat="server" Text="Cancel" />
</asp:Panel>`
you have put all the 4 TargetControlIDs inside the panels which are not visible
how can i detect if a modalpopupextender is currently being shown using javascript?
Modalpopupextender markup
<!-- Add Files Modal Form -->
<asp:HiddenField ID="AddFilesForModal" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="AddFilesModal" BehaviorID="modalPopupExtenderAddFiles"
TargetControlID="dummyButtonAddToPendingList" PopupDragHandleControlID="PanelAddFilesOuter" PopupControlID="PanelAddFilesOuter"
OkControlID="dummyButtonAddToPendingList" BackgroundCssClass="modalBackground" DropShadow="false"
Drag="true">
</ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender4" runat="server" TargetControlID="PanelAddFilesInner">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="PanelAddFilesOuter" runat="server" BackColor="Transparent" Style="display: none;">
<asp:Panel ID="PanelAddFilesInner" runat="server" BackColor="White" Style=" width:800px; height:600px; overflow:auto;">
<ContentTemplate>
<div id="AddFilesContainer" style=" padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:5px;">
<br />
Add Files
<div id="AddFiles_Div" style="height:80%;overflow:auto;">
<asp:TreeView ID="TreeViewAddItems" runat="server" Height="500px" ShowCheckBoxes="Leaf"
Width="380px" ImageSet="XPFileExplorer" NodeIndent="15" PathSeparator="\" ShowExpandCollapse="true"
EnableClientScript="true" OnTreeNodeCheckChanged="OnTreeNodeCheckChanged" OnAdaptedTreeNodeCheckChanged="OnTreeNodeCheckChanged" ShowLines="True">
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
<NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="2px"
NodeSpacing="0px" VerticalPadding="2px" />
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
VerticalPadding="0px" />
</asp:TreeView>
</div>
<br />
<div class="base" style="height:20px;">
<asp:LinkButton ID="lnkAddToPendingList" runat="server" OnClick="BtnAddToPendingList_Click" BorderStyle="Solid" BackColor="#CCCCCC">Add selected items to list</asp:LinkButton>
<asp:Button CssClass="Button" ID="dummyButtonAddToPendingList" runat="server" Style="display: none;" />
<asp:Button CssClass="Button" ID="CancelAddFiles" runat="server" Text="Cancel" OnClientClick="$find('modalPopupExtenderAddFiles').hide(); return false;" />
</div>
</div>
</ContentTemplate>
</asp:Panel>
</asp:Panel>
<!-- End Add Files Modal Form -->
I don't think there is a property you can call. You probably need to hook into the shown and hiding events. Something like this:
var amIVisible = false;
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {
$find('modalPopupExtenderAddFiles').add_shown(function () {
amIVisible = true;
});
$find('modalPopupExtenderAddFiles').add_hidden(function () {
amIVisible = false;
});
});
Use the BehaviourID to verify it on the client side:
<script type="text/javascript">
function IsVisible()
{
var modalPopup = $find('ModalBehaviourID');
return modalPopup ? true : false;
}
</script>
Second option:
<script type="text/javascript" >
function IsVisible()
{
return $find('ModalBehaviourID').get_PopupVisible();
}
</script>
Source: Link
I'm new at Jquery and im trying to display a div on the LinkButton ClickEvent (If I use a button instead of a linkbutton it will work)
This is my Jquery code
<script type="text/javascript">
$(document).ready(function () {
$('#<%=lbLog.ClientID%>').click(function () {
$("#login").show(2000);
alert("hello");
});
});
</script>
The hello message is displayed by not the div
and this is my html code:
<asp:LinkButton ID="lbLog" runat="server" onclick="lbLog_Click">Login</asp:LinkButton>
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
<div id="login" style="display:none">
Username: <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvUsername" runat="server" ControlToValidate="txtUsername" Display="Dynamic" ErrorMessage="*" ValidationGroup="LogGroup">*</asp:RequiredFieldValidator>
Password: <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox> <asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword" Display="Dynamic" ErrorMessage="*" ValidationGroup="LogGroup">*</asp:RequiredFieldValidator>
<asp:Button ID="btnLog" runat="server" Text="Login" onclick="btnLog_Click" ValidationGroup="LogGroup" />
</div>
try this
$("#login").css('display','block');
The ASP.NET link button will cause a postback which will refresh the page and hide the div thanks to style="display:none" no matter how you change your jQuery function. Try this instead:
<script type="text/javascript">
$(document).ready(function () {
$("#fakeLink").click(function () {
$("#login").show(2000);
});
});
</script>
<style type="text/css">
.fakeLink
{
color: blue;
text-decoration: underline;
cursor: pointer;
}
</style>
<div>
<span class="fakeLink" id="fakeLink">Login</span>
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
<div id="login" style="display:none;">
Username:
<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvUsername" runat="server" ControlToValidate="txtUsername"
Display="Dynamic" ErrorMessage="*" ValidationGroup="LogGroup">*</asp:RequiredFieldValidator>
Password:
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword"
Display="Dynamic" ErrorMessage="*" ValidationGroup="LogGroup">*</asp:RequiredFieldValidator>
<asp:Button ID="btnLog" runat="server" Text="Login" OnClick="btnLog_Click" ValidationGroup="LogGroup" />
</div>
</div>
You don't need onclick="lbLog_Click". The jquery selector for the ID looks incorrect '#<%=lbLog.ClientID%>'. View the source and make sure the id on the linkbutton matches what your passing to the selector in your javascript code.
I am trying to create a required field validation with a customvalidator. However when the field is empty it still does a postback?
<body>
<form id="Form1" runat="server">
<h3>
CustomValidator ServerValidate Example</h3>
<asp:Label ID="Message" Font-Name="Verdana" Font-Size="10pt" runat="server" />
<p>
<asp:TextBox ID="Text1" runat="server" Text="[Name:required]" />
<asp:CustomValidator ID="CustomValidator1" ControlToValidate="Text1" ClientValidationFunction="ClientValidate"
Display="Static" ErrorMessage="" ForeColor="green" Font-Name="verdana" Font-Size="10pt"
runat="server" />
<p>
<asp:Button ID="Button1" Text="Validate" OnClick="ValidateBtn_OnClick" runat="server" />
</form>
</body>
</html>
<script language="javascript">
function ClientValidate(source, arguments) {
alert(arguments.Value.length);
if (arguments.Value != "[Name:required]" && arguments.Value.length > 0) {
arguments.IsValid = true;
} else {
arguments.IsValid = false;
}
}
</script>
Add ValidateEmptyText="True" to your CustomValidator tag
See here for more details.
You should move your <script> tag containing the ClientValidate function to inside your <html> tags, preferably inside the <body> or <head> tags.