I'm using ajax togglebuttonextender to set image to radibuttons.
In javascript when I change the status of radibutton, togglebuttonextender status is not changed..
is there a way to set checked false of togglebuttonextender in js?
Please refer to the following example which demonstrates in javascript how to:
Get the state of a togglebuttonextender,
Change the state of a togglebuttonextender, and
Set the togglebuttonextender to false.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function getcheckstate() {
var e = $find("tb");
alert(e._element.checked);
}
function change() {
var e = $find("tb");
e._element.click();
//e._element.checked = (!e._element.checked); // <--- Dont use this method because it requires you hover your mouse over the image in order for it to update.
}
function changetofalse() {
var e = $find("tb");
if (e._element.checked) e._element.click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:ToggleButtonExtender
ID="tbe"
TargetControlID="CheckBox1"
ImageWidth="22"
ImageHeight="22"
CheckedImageUrl="http://findicons.com/files/icons/1050/pidgin_old_tango_smilies/24/good.png"
UncheckedImageUrl="http://findicons.com/files/icons/1050/pidgin_old_tango_smilies/24/bad.png"
runat="server"
BehaviorID="tb" />
<br /><br />
<input type="button" onclick="getcheckstate()" value="Get Checkbox Checked State" />
<br />
<input type="button" onclick="change()" value="Change Checkbox Checked State" />
<br />
<input type="button" onclick="changetofalse()" value="Set Checkbox Checked State To False" />
</div>
</form>
</body>
</html>
Call other extender's _checkChangedHandler() method on click of radio button in JavaScript.
Related
I have project in which i have textbox on which I have implement MaskEditExtender and set a value of Mask attribute like this
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<%# Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<title></title>
<script>
$(document).ready(function () {
//$("#TextBox1").val('00.0000');
debugger;
document.getElementById('TextBox1').value = "00.0000";
});
function CallMe() {
debugger;
if (document.getElementById('CheckBox1').checked) {
$find("MaskedEditExtender1").set_Mask("99.99");
document.getElementById('TextBox1').value = "00.00";
} else {
$find("MaskedEditExtender1").set_Mask("99.9999");
document.getElementById('TextBox1').value = "00.0000"
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<%--<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>--%>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:CheckBox ID="CheckBox1" runat="server" onchange="javascript:CallMe()" />
<asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
TargetControlID="TextBox1" BehaviorID="MaskedEditExtender1" Mask="99.9999"
MessageValidatorTip="true" MaskType="Number" InputDirection="LeftToRight"
AcceptNegative="None" ErrorTooltipEnabled="True" >
</asp:MaskedEditExtender>
</div>
</form>
</body>
</html>
I have initialed text-box value in $(document).ready function. And my task is to change mask value on change of checkbox. This task i have done with a javascript function "CallMe". All of the code is work fine but when user click on text box. Textbox value change from "00.00" to "00.0000" i.e. initial value of Mask attribute of MaskEditExtender.
Please help me!
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<%# Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<title></title>
<script>
$(document).ready(function () {
//$("#TextBox1").val('00.0000');
debugger;
document.getElementById('TextBox1').value = "00.0000";
});
function CallMe() {
debugger;
if (document.getElementById('CheckBox1').checked) {
$find("MaskedEditExtender1")._MaskConv = "99.9";
//$find("MaskedEditExtender1").set_Mask("99.9");
//$find("MaskedEditExtender1")._convertMask();
document.getElementById('TextBox1').value = "00.0";
alert($find("MaskedEditExtender1").get_Mask());
}
else {
$find("MaskedEditExtender1")._MaskConv = "99.9999";
//$find("MaskedEditExtender1").set_Mask("99.9999");
//$find("MaskedEditExtender1")._convertMask();
document.getElementById('TextBox1').value = "00.0000"
alert($find("MaskedEditExtender1").get_Mask());
}
}
function txtBox1_ClientClicked() {
// alert($find("MaskedEditExtender1").get_Mask());
// $find("MaskedEditExtender1").set_Mask("99.9");
// document.getElementById('TextBox1').value = "00.0";
alert($find("MaskedEditExtender1").get_Mask());
}
</script>
</head>
<body style="height: 137px">
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<%--<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>--%>
<asp:TextBox ID="TextBox1" runat="server" onclick="txtBox1_ClientClicked()"></asp:TextBox>
<asp:CheckBox ID="CheckBox1" runat="server" onchange="javascript:CallMe()" />
<asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
TargetControlID="TextBox1" Mask="99.9999"
MessageValidatorTip="true" MaskType="Number" InputDirection="LeftToRight"
AcceptNegative="None" ErrorTooltipEnabled="True" >
</asp:MaskedEditExtender>
</div>
</form>
</body>
</html>
For changing mask value using javascritp we can use _MaskConv or .set_Mask("new value") and combine with _convertMask function.
i have the following function in default.aspx.....i have webusercontrol which have 10 checkboxes and 1 button .... i want when i click on button1 of user control then it can access the function of default.aspx ...page ...if i dragged the usercontrol to default.aspx
Normally if i use 10 checkboxes and 1 button in default.aspx then it works fine ... if i use 10checkboxes and 1button in usercontrol then drag that usercontrol in default.aspx then it will not work ..
what was the problem ...how to fix this ?
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<%# Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
</div>
</form>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("#'<%=Button1.ClientID %>'").click(function(){
var vCheckedCBCount = $("input:checkbox").filter(function(index){
return $(this)[0].checked == true;
}).length;
if(vCheckedCBCount > 1)
{
alert('You cannot check more than 1 check box.');
return false;
}
});
</script >
</body>
</html>
Try this one -->
------------------------------------ASPX Code------------------------------------------------------------------------------
ASPX:
<%# Register Src="~/UserControl/WebUserControl.ascx" TagName="ucCheckBox" TagPrefix="UC" %>
<UC:ucCheckBox ID="ucCheckBox" runat="server" />
JAVASCRIPT:
$(document).ready(function(){
$("input:submit[id$='btnSubmit']").click(function(){
var vCheckedCBCount = $("input:checkbox").filter(function(index){
return $(this)[0].checked == true;
}).length;
if(vCheckedCBCount > 5)
{
alert('You cannot check more than 5 check box.');
return false;
}
});
});
------------------------------------ASPX Code------------------------------------------------------------------------------
-------------------------------User control code--------------------------------------
UserControl:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="UserControl_WebUserControl" %>
<asp:CheckBox ID="CheckBox1" runat="server" /><br />
<asp:CheckBox ID="CheckBox2" runat="server" /><br />
<asp:CheckBox ID="CheckBox3" runat="server" /><br />
<asp:CheckBox ID="CheckBox4" runat="server" /><br />
<asp:CheckBox ID="CheckBox5" runat="server" /><br />
<asp:CheckBox ID="CheckBox6" runat="server" /><br />
<asp:CheckBox ID="CheckBox7" runat="server" /><br />
<asp:CheckBox ID="CheckBox8" runat="server" /><br />
<asp:CheckBox ID="CheckBox9" runat="server" /><br />
<asp:CheckBox ID="CheckBox10" runat="server" /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Continue" />
-------------------------------User control code--------------------------------------
Try
$("#'<%=Button1.ClientID %>'").click(function(){
});
A usercontrol implements INamingContainer Interface. So in order to get the elements using id you need to get the runtime generated id by using .ClientID.
When you added the usercontrol to default.aspx, the ID of Button1 changed to userControl1_Button1
So you need to change $("#Button1").click(function() so that it will always have the correct name for the button:
$("# + <%=Button1.ClientID %> +").click(function()
I've got to call two js functions, setfocus on textbox and stop a postback from occuring on single buttonclick. I think I got it if I could only intercept the postback. My js skills are on par with weaksauce.
test case
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="JsTextFocus.aspx.cs" Inherits="WebApplication1.JsTextFocus" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="Javascript">
function aMethod() {
var dowork = 'bleh';
}
function setFocusOnTextBox() {
TextBox1.Focus();
return false;//Stop the postback..FAIL
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:ImageButton ID="imageBtn" runat="server" ImageUrl="images/document_Small.gif" CausesValidation="false" OnClientClick="aMethod();return setFocusOnTextBox();return false;" />
</div>
</form>
</body>
</html>
Page load shouldn't fire after OnClientClick
protected void Page_Load(object sender, EventArgs e)
{
Response.Write("PS happened at " + DateTime.Now);
}
You are referring to TextBox1 in yout setFoucs.. function which is unknown at that point. Use document.getElementByID to get a reference to textbox and then call focus not Focus.
function setFocusOnTextBox()
{
var TextBox1 = document.getElementById("TextBox1");
TextBox1.focus();
return false;
}
You can remove the return false at the end of the Image ClientClick handler.
i.e.:
<asp:ImageButton ID="imageBtn"
runat="server"
ImageUrl="images/document_Small.gif"
CausesValidation="false"
OnClientClick="aMethod();return setFocusOnTextBox();" />
I'm trying to removed the added controls. Here's the mark-up that adds upload controls to the page:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Multi File Upload</title>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data">
<p id="upload-area">
<input id="File1" type="file" runat="server" size="60" />
</p>
<input id="AddFile" type="button" value="Add file" onclick="addFileUploadBox()" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<p><asp:Button ID="btnSubmit" runat="server" Text="Upload Now" OnClick="btnSubmit_Click" /></p>
<span id="Span1" runat="server" />
<script type="text/javascript">
function addFileUploadBox()
{
if (!document.getElementById || !document.createElement)
return false;
var uploadArea = document.getElementById ("upload-area");
if (!uploadArea)
return;
var newLine = document.createElement ("br");
uploadArea.appendChild (newLine);
var newUploadBox = document.createElement ("input");
// Set up the new input for file uploads
newUploadBox.type = "file";
newUploadBox.size = "60";
// The new box needs a name and an ID
if (!addFileUploadBox.lastAssignedId)
addFileUploadBox.lastAssignedId = 100;
newUploadBox.setAttribute ("id", "dynamic" + addFileUploadBox.lastAssignedId);
newUploadBox.setAttribute ("name", "dynamic:" + addFileUploadBox.lastAssignedId);
uploadArea.appendChild (newUploadBox);
addFileUploadBox.lastAssignedId++;
}
</script>
</form>
</body>
</html>
Thank.
try parent.removeChild(element);
The following site seems to answer what you are looking for:
http://www.dustindiaz.com/add-remove-elements-reprise/
Why does the below alert always show me null?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Keyup._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<%-- <script src="JQuery/jquery-1.4.1.js" type="text/javascript"></script>--%>
<script type="text/javascript">
document.onkeyup = onkeyupOfDocument;
function onkeyupOfDocument(evt) {
//var MultiView = $("*[id$='TextBox1']");
var MultiView = document.getElementById("MultiView1");
alert(MultiView);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:View>
<asp:View ID="View2" runat="server">
</asp:View>
</asp:MultiView>
</div>
</form>
</body>
</html>
After solving null problem how can I check ActiveViewIndex with JavaScript or jQuery?
It seems
if(MultiView.ActiveViewIndex == 0)
is not true!!
Thanks in advance.
after our page is completely loaded into the browser & viewing the source code , we can say it's not possible to CHANGE (Not CHECK) the ActiveViewIndex of Regular MultiView In asp.net with only javascrip or jquery.
because there is no element out there with MultiView1 id -> just a div Existed.
we only can check the ActiveViewIndex of MultiView1 as Nathan has answered by below code :
var activeViewIndex = <%=MultiView1.ActiveViewIndex %>;
plz see the below link for more information (latest post):
MultiView Is A reach Element
therefore the below code has no meaning :
var MultiView = document.getElementById("<%=MultiView1.ClientID %>");
if you want to CHANGE (Not Check) the ActiveViewIndex in client side there is a trick -> plz look at the below codes :
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void butSubmit_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = int.Parse(HiddenField1.Value);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Demo</title>
<script language="javascript" type="text/ecmascript">
function OnClientClick( ServerControID,IndexControlID, Index){
var objDemo = document.getElementById(ServerControID);
if(objDemo){
document.getElementById(IndexControlID).value = Index;
objDemo.click();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<span style="color: #ff0000; background-color: #33ccff"><strong>Hi, I am View 1</strong></span></asp:View>
<asp:View ID="View2" runat="server">
<strong><span style="color: background; background-color: #99ff00">Hi, I am View 2</span></strong></asp:View>
</asp:MultiView></div>
<asp:HiddenField ID="HiddenField1" runat="server" />
<input id="btnShow1" type="button" value="Show View 1" onclick="OnClientClick('butSubmit','HiddenField1','0')" />
<input id="btnShow2" type="button" value="Show View 2" onclick="OnClientClick('butSubmit','HiddenField1','1')" />
<div style="display: none">
<asp:Button ID="butSubmit" runat="server" OnClick="butSubmit_Click" Text="Submit" /></div>
</form>
</body>
</html>
and here is the source code of the upper codes after the page is loaded in ie 9 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
Demo
</title>
<script language="javascript" type="text/ecmascript">
function OnClientClick(ServerControID, IndexControlID, Index) {
var objDemo = document.getElementById(ServerControID);
if (objDemo) {
document.getElementById(IndexControlID).value = Index;
objDemo.click();
}
}
</script>
</head>
<body>
<form method="post" action="WebForm3.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIODMxNDI3MTNkGAEFCk11bHRpVmlldzEPD2RmZJjYXp6H2AsOwVGwRlIRlk0x9agdyp/Kg++cmPNXKpTg" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKrwZG1BAKQo8KrDX7rF3izcHDs+E9bwpx3GnVGoIZVi2Gpv0IOOu9xXNMo" />
</div>
<div>
<span style="color: #ff0000; background-color: #33ccff"><strong>Hi, I am View 1</strong></span></div>
<input type="hidden" name="HiddenField1" id="HiddenField1" value="1" />
<input id="btnShow1" type="button" value="Show View 1" onclick="OnClientClick('butSubmit','HiddenField1','0')" />
<input id="btnShow2" type="button" value="Show View 2" onclick="OnClientClick('butSubmit','HiddenField1','1')" />
</form>
</body>
</html>
change
var MultiView = document.getElementById("MultiView1");
to
var MultiView = document.getElementById("<%=MultiView1.ClientID %>");
the reason the alert is always null is that there is no element on the client-side called MultiView1: that's the server-side id of the control.
to get the active view index to the client-side, use this:
var activeViewIndex = <%=MultiView1.ActiveViewIndex %>;