I have a multiline textbox that by default, is set to ReadOnly. I would like a button on the page to change the control to allow it to be edited. I would like this code to run on the client side because the page renders slowly and I'd like to avoid the post back.
The problem I'm having is the javascript code that I wrote to remove the readonly attribute appears to have no effect. I posted a stripped down example that illustrates the problem for your review.
<%# 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">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" language="javascript">
function EnableEditing() {
var e = document.getElementById("<%=TextBox1.ClientID%>");
var result = e.removeAttribute("readonly");
alert(result);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div> </div>
<asp:TextBox ID="TextBox1" runat="server" ReadOnly="True" TextMode="MultiLine">test</asp:TextBox>
<input id="Button1" onclick="EnableEditing()" type="button" value="Remove RO" />
</form>
</body>
</html>
TextBox1 is the server side id,
try
var e = document.getElementById("<%=TextBox1.ClientID%>");
var result = e.removeAttribute("readonly",0);
or if you dont want the caseinsensitive search
var result = e.removeAttribute("readOnly");//note upercase Only
Use var e = document.getElementById("<%=TextBox1.ClientID%>");
Also, if you want to read the modified text on postback, you can't set the readonly attribute on the server control. You have to set it on the client only, as in: TextBox1.Attributes("readOnly") = "readOnly";
Related
I'm trying to reset my form using javascript on client side. The code looks like this:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 Reset() {
TextBox1.text = "";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Reset()" />
</div>
</form>
</body>
</html>
This of course isn't working, I get the error that Button1 is undefinded. I tried looking control's name within browser (by viewing page source) and using that instead of its ID but that didn't work either.
you need to get the value using getElementById
var mybutton= document.getElementById('Button1');
mybutton.value = ""
I advise you to use jQuery for your javascript code. It's a standard anyway.
After you reference jQuery, you may rewrite your JavaScript as follows:
<script type="text/javascript" >
function resetForm() {
$("#<%=TextBox1.ClientID %>").val("");
}
</script>
If you still do not want to use jQuery, then you need to access your element using its client ID like following:
<script type="text/javascript" >
function resetForm() {
document.getElemenyById("<%=TextBox1.ClientID %>").value = "";
}
</script>
Also, as #Jon pointed out, you need to either rename your OnClientClick value to resetForm() or rename your JavaScript function.
I have this asp.net code in my page :
<div id="prx">ABC</div>
And I want to change the value "ABC" to something when for example the user type a value in TextBox.
How can I do that using Ajax ?
Thanks
You don't need AJAX to do this. You can simply use Javascript to update the content of the DIV tag with the contents of the INPUT widget. See How to set the value of a form element using Javascript.
Now if you'd like to update the TextBox with something from the server without reloading the page, then that's AJAX. I'd use jQuery.ajax() function over UpdatePanels though. Here's a jQuery AJAX Tutorial.
May be using javascript?)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication11.WebForm2" %>
<!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" runat="server">
<title></title>
<script type="text/javascript">
function setDivContent() {
var textInput = document.getElementById('text1');
var divPrx = document.getElementById('prx');
divPrx.innerHTML = textInput.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button onclick="javascript:setDivContent(); return false;">Set</button>
</div>
</form>
</body>
</html>
Check out the ASP.NET AJAX UpdatePanel control. It lets you change text on a page and "AJAX-ifies" anything inside it, instead of doing a full postback. Here is a good tutorial on it.
I know this is old question.. but it might help someone
JQUERY for this would be :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(e){
e.preventDefault();
$("#prx").text($("#text1").val());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button type="button" id="btn1">Set</button>
</div>
</form>
</body>
</html>
I have a parent page with two data controls. I want to be able to open a child window, do something on it, and when it closes I want to rebind only one of the two data controls on the parent page. I have the control I want to update within an UpdatePanel so would like to call rebind it and call UpdatePanel.Update().
From a child window, you can't actually "call" a server side function for the parent page, however you can use some javascript to invoke client side functions on that page.
On the parent page:
<script language="Javascript" type="text/javascript">
function CallAlert()
{
alert("This is parent window's alert function.");
}
</script>
On the child page:
<script language="Javascript" type="text/javascript">
function CallParentWindowAlert()
{
window.opener.CallAlert();
return false;
}
</script>
In the example you provided, in particular where you have an UpdatePanel, you've actually left yourself a few options here. If the UpdatePanel is set with some form of trigger to force it to update, be it all children or just specified ones, in your parent function you can force a postback on one of those controls. Ultimately, the parent pages javascript function should have some form of a __doPostBack() call, referencing the id of a control and some (empty) parameter, however you'd probably be better off generating that javascript with codebehind via:
Page.ClientScript.GetPostBackEventReference(control, null);
Once you put that together, it's all a matter of tying the actual invocation to whatever client side event you want on your child page, be it onUnLoad() or in some custom function you call.
Try this out all you got to do is call __doPostBack on the parent page targeting the update panel or something in the update panel.
Parent Code:
<%# Page Language="C#" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Parent Window</h1>
Time:
<%= DateTime.Now.ToString() %>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Update Panel Time<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1" Text="Submit" runat="server" />
Click To Open Child Window
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Child Code:
<%# 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">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function UnloadMe() {
if (opener) {
opener.__doPostBack("UpdatePanel1", "");
}
}
</script>
</head>
<body onunload="UnloadMe()">
<form id="form1" runat="server">
<div>
<h1>Child Window</h1>
</div>
</form>
</body>
</html>
Is SearchString acting as property of Page class?
Here is code,
<%# 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">
public string SearchString
{
get { return txtSearch.Text; }
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Button Search Typed</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label
id="lblSearch"
Text="Search:"
Runat="server" />
<asp:TextBox
id="txtSearch"
Runat="server" />
<asp:Button
id="btnSearch"
Text="Go!"
PostBackUrl="ButtonSearchResultsTyped.aspx"
Runat="server" />
</div>
</form>
</body>
</html>
It is a property of your page class. This is not the page class. Your class inherits from the main page class.
Also, you need to be careful how you use thist kind of thing. Remember, ASP.Net pages are stateless, just like with other platforms. That means every time you do a postback, including just to handle simple server events like button clicks, you are working with a new instance of the class. Any previous SearchString value was lost.
It's a property of the class generated for your ASPX file, which inherits from System.Web.UI.Page. It's not added to that class itself, of course.
My javascript code modifies some properties, visibility included. After postback, some properties stuck, others are "forgotten". Here I try to change the Text property of a textbox and the visibility property of a label to 'hidden'. After postback, the text is preserved, but the label is shown. I would very much like to keep the label hidden after the postback. The same occurs with the 'display' CSS property. Or, if I try to hide a <div>. Any help would be very much appreciated:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="ShowHide.aspx.cs" Inherits="WebApplication1.ShowHide" %>
<!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>
<script type="text/javascript" language="javascript">
function ShowHide()
{
debugger;
var txt = document.getElementById('txtNumber');
txt.value='4';
var lbl = document.getElementById('lblShowHide');
if(lbl.style.visibility == 'hidden')
{
lbl.style.visibility = '';
}
else
{
lbl.style.visibility = 'hidden';
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblNumber" runat="server" Text="Enter Number" />
<asp:TextBox ID="txtNumber" runat="server" Text="5" />
<asp:Label ID="lblShowHide" runat="server" Text="Show" />
<input id="btnChangeByJS" type="button" value="HTML Change by JavaScript" onclick="ShowHide();" />
<asp:Button ID="cmdSubmit" runat="server" Text="ASP Submit" />
<asp:HiddenField ID="hfShowHide" runat="server" />
</div>
</form>
</body>
</html>
Thank you!
A postback is just another way of saying the html form was submitted. When you submit a form, the only things sent to the server are the value and name properties of the input and select elements in the form. That's why your "text" is preserved: it's the value attribute of that element. If you want to also preserve your visibility changes, or any other changes, you need to add an element to your form that can hold these changes somehow in it's value attribute.
That's essentially what ViewState is; an extra hidden element whose value property holds the current state of controls. But ViewState works for maintaining state between server instances of your page. It's not for moving new changes from the client to the server.
Hook on the client side pageLoad event and hide the text box there. Example:
function pageLoad() {
var txt = document.getElementById('txtNumber');
txt.value='4';
var lbl = document.getElementById('lblShowHide');
if(lbl.style.visibility == 'hidden')
{
lbl.style.visibility = '';
}
else
{
lbl.style.visibility = 'hidden';
}
}