Remove added control with Javascript in ASP.NET

Remove added control with Javascript in ASP.NET - javascript

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/

Related

ASP .Net Hidden field setting but not posting in IE

In my web form I have an ASP Hidden field as such:
<asp:HiddenField ID="HiddenField1" runat="server" OnValueChanged="HiddenField1_ValueChanged" /> I am current setting the value of this field client side as such
document.getElementById("ContentPlaceHolder1_HiddenField1").value = type + pngUrl;
Then I call
document.forms[0].submit(); to post the page.
The changed value of the hidden field successfully posts in both chrome and firefox, but in IE the DOM Viewer says the data is inside the hidden field but on inspection of the post the area for the hidden field is totally empty.
(This is in IE 11)
EDIT: Fixed But example code of the before an after, looking for an explanation on why this fixed it.
Working version
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="webcam.min.js"></script>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" />
<div id="CameraDivtest"></div>
<input type="button" id="start" value="startCamera" onclick="videoCall('test')" />
<input type="button" value="take picture" id="picButtonKey" />
</div>
</form>
<script>
var c;
var v;
var con;
function videoCall(type) {
Webcam.set({
width: 600,
height: 420
});
Webcam.attach('#CameraDiv' + type);
function goingGrey() {
Webcam.snap(function (data_uri, canvas, context) {
var pngUrl = data_uri
document.getElementById("<%=HiddenField1.ClientID%>").value = type + pngUrl;
document.forms[0].submit();
});
}
document.getElementById("picButtonKey").addEventListener("click", function (e) {
goingGrey();
});
}
</script>
</body>
</html>
Broken version
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="webcam.min.js"></script>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" />
<div id="CameraDivtest"></div>
<input type="button" id="start" value="startCamera" onclick="videoCall('test')" />
<input type="button" value="take picture" id="picButtonKey" />
</div>
</form>
<script>
var c;
var v;
var con;
function videoCall(type) {
Webcam.set({
width: 600,
height: 420
});
Webcam.attach('#CameraDiv' + type);
function goingGrey() {
Webcam.snap(function (data_uri, canvas, context) {
var pngUrl = data_uri
document.getElementById("<%=HiddenField1.ClientID%>").value = type + pngUrl;
});
}
document.getElementById("picButtonKey").addEventListener("click", function (e) {
goingGrey();
document.forms[0].submit();
});
}
</script>
</body>
</html>

How to change value of MaskEditExtender's attribute Mask using 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.

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

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.

Remove added control with Javascript in ASP.NET - javascript

try parent.removeChild(element); The following site seems to answer what you are looking for: http://www.dustindiaz.com/add-remove-elements-reprise/

Related

ASP .Net Hidden field setting but not posting in IE

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

Changing state of a radibutton with ToggleButtonExtender

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

Asp.net MultiView /check ActiveViewIndex With Javascript Or jQuery

Categories

Resources