How to change value of MaskEditExtender's attribute Mask using javascript

How to change value of MaskEditExtender's attribute Mask using javascript - javascript

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.

Related

Passing child values in Parent with TabPanel

I am having problem with the script of passing values from child to parent with tabpanel (controller). Within that Tab there's a textbox. When I tried to pass a value that within the TabPanel it doesn't work. When I removed the panel it works.
Here the html script from
Parent.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="Form1" runat="server">
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
<HeaderTemplate>
TabPanel1<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</HeaderTemplate>
<ContentTemplate>
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Button" />
</div>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
</cc1:TabPanel>
</cc1:TabContainer>
</form>
</body>
</html>
and here's the child and Javascript
child.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Child.aspx.cs" Inherits="Child" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="Initialtest" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="Initialtest2" runat="server"></asp:TextBox>
<br />
<%--<input type="button" value="Select" onclick="SetName();" />--%>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
<script type="text/javascript">
function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("TextBox1");
txtName.value = document.getElementById("Initialtest").value;
var txtName1 = window.opener.document.getElementById("TextBox2");
txtName1.value = document.getElementById("Initialtest2").value;
}
alert("test");
window.close();
}
</script>
</form>
</body>
</html>
the child.aspx.cs (code behind)
public partial class Child : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
//protected void Button1_Click(object sender, EventArgs e)
//{
// //
// Button1.Attributes.Add("onclick", "javascript:SetName();");
//}
protected void Button1_Click(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", "SetName()", true);
}
}
The scenario child must pass the value to textbox1 within that TabPanel. Hoping that someone will help me to resolve the problem.

Done, I resolved this problem.
<script type="text/javascript">
function SetName() {
if (window.opener != null && !window.opener.closed) {
var txtName = window.opener.document.getElementById("TextBox1");
txtName.value = document.getElementById("Initialtest").value;
var txtName1 = window.opener.document.getElementById("TextBox2");
txtName1.value = document.getElementById("Initialtest2").value;
}
alert("test");
window.close();
}
</script>

Changing state of a radibutton with ToggleButtonExtender

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.

how to call the jquery function in .aspx page to usercontrols controls in asp.net?

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()

Get me off the JavaScript postback Failboat

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();" />

Asp.net MultiView /check ActiveViewIndex With Javascript Or jQuery

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 %>;

Develop Reference

JavaScript is the programming language of the Web.

How to change value of MaskEditExtender's attribute Mask using javascript - javascript

Related

Passing child values in Parent with TabPanel

Changing state of a radibutton with ToggleButtonExtender

how to call the jquery function in .aspx page to usercontrols controls in asp.net?

Get me off the JavaScript postback Failboat

Asp.net MultiView /check ActiveViewIndex With Javascript Or jQuery

Categories

Resources