We Keep Coding

Textbox becomes readonly on postback even when setting the readonly attribute to false manually

So, in my current application in ASP.net, I have a weird bug. Textbox that I have added in the existing page, goes in read only mode after the postback. When the page loads the first time, textbox works fine. But after page load, it stays enabled and in read only mode.
I checked Dev tools in IE, and the text box has readonly attribute set to false, as expected. I can even set the other properties from the js function called during page load, and they work fine. Only the readonly attribute doesn't work.
I am unable to figure out a reason as to why this is happening, so I am unable to solve it either.
<tr> <td nowrap align="right"> <asp:Label ID="lblResTimeDescription" runat="server" EnableViewState="False" CssClass="Common">Response Time Comments</asp:Label> : </td>
Textbox code:
> <asp:TextBox ID="txtResTimeDescription" CssClass="TextBox"
> MaxLength="200" TextMode="MultiLine" runat="server" Width="100%"
> Height="50px" ReadOnly="false"></asp:TextBox>
P.S. Do let me know, which code I can post here.
Edit: JS function called at the very end of the page load.
function fnEnableComments(e) {
var strCompletion = document.getElementById("ddlCompletion").value;
if (strCompletion == "Y") {
document.getElementById("txtResTimeDescription").disabled = false;
document.getElementById("txtResTimeDescription").setAttribute("value", "zyx");
document.getElementById("txtResTimeDescription").setAttribute("ReadOnly",false);
}
else {
document.getElementById("txtResTimeDescription").disabled = true;
document.getElementById("txtResTimeDescription").value = "";
}
}
This function gets called properly, as I can see the value change to zyx.
Edit 2:
Removed all hints of readonly from code and js. Still the same problem. Also, the textbox is getting enabled properly, on change of dropdown, gets the value set properly. I can even click on the text box to set the focus, but I just can't change the value in it.
Edit 3:
Program workflow explanation:
User select a record from the listings page and the page loads with information about that record. User can enter data, and save the same. But user can't set the completion flag to yes, without providing comments. In other cases, the comment is not needed at all. This textbox is used to add comments. Typically user updates all the data, and saves the information. After saving the information, page refreshes, and at which point user changes the completion flag. So, on dropdown change and on page load, I check for the completion flag and enable and disable the comments textbox.
This all works fine as far as logic goes. Only thing is when users saves the data first time, and page reloads, textbox stays readonly even when user changes the completion flag. If user refreshes the page again, then code works fine. Basically, this bug causes user to refresh the page, manually after every save, defeating the purpose of refreshing from the code.

attempts to place this before finalizing what you need the first time in the code behind
txtResTimeDescription.Attributes.Remove("readonly");
with this if you put readonly attribute when you take away this textbox

Finally found a solution. I still don't know why it is happening. But below code did the trick.
document.getElementById("txtResTimeDescription").setAttribute("readOnly", false);
I was using the same code earlier too, sadly with wrong capitalization of the attribute.

Update ASP.NET Page after GridView DataBind

EDIT:
Apparently, part of the problem is that while an ASP:GridView has an OnDataBound() event (which you can use in the code-behind), the corresponding HTML table that is produced does NOT, so you can attach that event to JavaScript. (Did I get that right?) So, that's why I'm having trouble with that bit of the issue. Back to the drawing board.
I'm a desktop developer (WinForms with VB.NET) transitioning into ASP.NET development. My mind is really bending around the DOM and JavaScript and Session State and all of the stuff that goes along with web development. I'm not stupid, and I've done research (including hours of video watching and hundreds of pages of "Intro to ASP.NET" reading), but I keep hitting the wall with what seem to be fairly straightforward problems.
Basically, my current situation can be summed up as follows:
I have a page that runs a very long process initiated by the user.
The long process can take up to a few minutes , so I want to indicate to the user that SOMETHING is happening.
When the process has completed, I either have:
a. Results to show in a GridView
b. No results to show
If I have results to show, I want to display them.
If I have no results to show, I want to show a label to the user that says "No results to show."
What's working:
I have a basic page where the user selects start and end dates and kicks off the check process.
The check process works fine (using LINQ-to-SQL logic developed for a desktop version of this program).
I've got an UpdatePanel on my page which shows a label and an animated gif to indicate that something's happening.
If I get results, they display appropriately in my GridView.
What's not working:
I'd love to give the user some sort of progress bar to indicate actual progress made toward completion rather than some endlessly-animating gif that doesn't indicate much at all. I could calculate this value quickly and easily, but can't figure out how to transfer said value from server to web page.
I can't figure out how to trigger an "unhide" event for the label. The long-running process is in a button's click event handler, where I run my custom code and generate a DataTable, which I then save as a session variable, assign it as the GridView's DataSource and call GridView.DataBind(). When I try to determine the contents of the DataTable and hide/reveal the label there, nothing seems to happen.
Problem #2 is really what I need to figure out in order to publish this web site. I'm assuming it involves a JavaScript solution, and I've tried some stuff, but I find that I'm truly guessing and don't have a good grasp on what the solution should resemble.
Here's the label I'd like to selectively reveal/make visible:
<tr>
<td colspan="2" align="center">
<h2><asp:Label runat="server" ID="lblNoMissing" Text="No Missing Documentation Found" Visible="false"></asp:Label></h2>
</td>
</tr>
Here's a JavaScript function I'm trying to test:
<script type="text/javascript">
function databound() {
var gridViewID = '<%=_gridView1.ClientID%>';
var labelID = '<%=lblNoMissing.ClientID%>';
var gridView = document.getElementById(gridViewID);
if (gridView.rows.length > 0) {
$get(labelID).style.visibility = "false";
} else {
$get(labelID).style.visibility = "true";
}
}
</script>
Problem: This fails (databound not a member of Default.aspx):
<asp:GridView ID="_gridView1" runat="server"
AllowSorting="True" AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="Horizontal" PageSize="20" OnDataBound="databound();">
// Rest of GridView definition removed
</asp:GridView>
What am I missing?
Thanks!!!!

For problem #1, there are a whole bunch of free Javascript progress bars out there. As for your value that you can't retrieve, try this:
<asp:Label ID="ProgressValue" runat="server" visible="false" />
And in your code behind.
ProgressValue.Text = //Your value from your database.
And just reference it from your Javascript there.
For your second problem, can't you just do in your code behind (written in C#)
//Process here
if(IDofGridView.Rows != null)
{
lblNoMissing.Visible = true;
}
Or am I missing something?

For #2, set style.visibility="visible"
See: http://www.w3schools.com/cssref/pr_class_visibility.asp
for valid values.
For #1, you can use an update panel with a timer for refreshing it. The server can simply add the current status to that users Session. The update panel code reads the session and shows the result.

So, I'm not sure I solved this exactly the way I wanted, but I have a working version. Here's what I did (for others who might find this useful):
I have abandoned my plans for #1 for now. I just simply don't have the time to continue looking into this issue right now. I'm bummed, though, because it seems like this is something a lot of people need to do, but I can't find a cookie cutter solution. Seems weird to me. Maybe I'm still missing some key info that would make it easy.
I have a GridView, a progress Label, an animated gif and a "no results" Label that I want to show/hide at various times. What ended up working for me was to place them all in UpdatePanels and simply show/hide them in my code-behind. It's kind of starting to make sense, but changing the visibility of a control from the code-behind when the control to change is OUTSIDE of an UpdatePanel but the code is initiated FROM INSIDE an UpdatePanel seems like a barrier that can't be crossed. That is, when my "no missing" Label was OUTSIDE of an UpdatePanel, the long-running process (started by a button INSIDE the UpdatePanel) couldn't change its visibility. (Does that make sense? Anyone want to correct that?)
Thanks for reading! Thanks for the ideas!
Edit:
OK, so I'm apparently wrong again. The code that shows/hides my Label and GridView has nothing to do with any code executed in the long-running process in the code-behind file.
Here's the code that actually does what I want (code is in Default.aspx):
<script type="text/javascript" >
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(CheckStatus);
function CheckStatus(sender, args) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true); // stop request from being sent
$get("_messageSpan").innerHTML = "<h2>The last request is still processing.</h2>";
}
else {
var lbl = document.getElementById('<%=lblNoMissing.ClientID%>');
if (lbl) {
lbl.style.visibility = "hidden";
}
var gview = document.getElementById('<%=_gridView1.ClientID%>');
if (gview) {
gview.style.visibility = "hidden";
}
$get("_messageSpan").innerHTML = "";
}
}
</script>
The code related to "_messageSpan" is to prevent subsequent button clicks from starting the long-running process again (and also notify the user that it's still running).
So, since it is never correct for either of my items to be showing during a non-AsyncPostBack, I simply try to get the items and, if I get them, set them hidden. Now my page is behaving correctly. This may be some hacky code, but the page at least looks the way I want it!

How to toggle visibility of Asp.Net combobox with javascript or Jquery

I have a set of server side combo boxes in a table. Based on client events, I need them to appear or disappear. I've tried the following with no success:
document.getElementById("cboToothNumber").style.visibility = "hidden";
$("#cboToothNumber").hide()
Any ideas? Also, this will need to work from a js file

You don't want the ASP.NET ID, you want the client id, so try
$("#<%=cboToothNumber.ClientID%>").hide()
From a JS file, this won't work. You can use the same code to get the ClientID and set it as a variable or pass it into a function in the Javascript file though.

Have you checked the ID of the combo boxes once the page has rendered? The Id of the element might be changing due to it being serverside.
If you are using .net 4 - there is a way to disable the ClientId by setting the ClientIdMode.
<asp:Label ID="Label1" runat="server" ClientIDMode="[Mode Type]" />
Check out these links:
http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx
http://weblogs.asp.net/asptest/archive/2009/01/06/asp-net-4-0-clientid-overview.aspx

Cannot get Javascript function to fire from a textbox in a gridview

I have a textbox in the ItemTemplate of a Gridview. On the _RowDataBound event I add an attribute to the textbox like so:
TextBox txtQuantity = (TextBox)e.Row.FindControl("txtQuantity");
txtQuantity.Attributes.Add("onkeypress", "CheckInputForNumeric(event)");
And it simply will not fire a JS function.
I've tried doing onClick, onBlur, onKeyPress... even tried changing the case to: onclick, onblur, onkeypress... nothing seems to be able to fire my JS function.
elsewhere on that same page I have:
txtAddMarkup.Attributes.Add("onkeypress", "CheckInputForNumeric(event)");
(that textbox is not in a gridview)
and this works just fine.
I'm totally stuck and frustrated at this point because it seems no matter what I do, I cannot get this textbox to fire a JavaScript function

Please run your project and look at the name of the textbox generated by viewing the source in the broswer (IE, Firefox, Safari, whatever). You'll likely see that the name of the textbox has changed. Thanks, ASP.
You can't use the DOM to access the elements by name because they're renamed for you.

For some reason, deleting temporary internet files and reloading the page wasn't getting the newest .js. I had to unload the project and re-build it. Which is weird because I've never had to do that before for other controls
thanks for your inputs!

try this one:
TextBox txtQuantity = (TextBox)e.Row.FindControl("txtQuantity");
txtQuantity.Attributes.Add("onkeypress", "CheckInputForNumeric(event)");
txtQuantity.Attributes["onkeypress"] =
string.Format("javascript:CheckInputForNumeric(this,'{0}','{1}','{2}');", argument1, argument2, argument3);
Or Simply
txtQuantity.Attributes["onkeypress"] =
string.Format("javascript:CheckInputForNumeric (this);");

Get Element in div with JavaScript

I want to disable/enable a button with JavaScript. Because the JavaScript is called, after a Flash animation is rendered, the button exists at the time of the execution.
The button is in a hierarchy:
<html><body><form#form1><div#control><asp:Button#Export1>
I tried for hours to get a reference to that button, but nothing seems to work:
document.getElementById("Export1")
// and
document.getElementbyId("form1").getElementById("control").getElementById("Export1")
// and many more
How to get a reference to that button (in order to change btnref.disabled = true)?
Thanks a lot for your help!

Have you tried right-clicking in the document and selecting "view source" to see how that code actually renders? An asp:Button is a server control, that gets translated to an input field during render. During this, the ID of the field will not be exactly what you set it to in your aspx.
You can use Export1.ClientID at serverside to get the ID of the control.

If it's the only button in your div, this should work:
var btnref = document.getElementById("controls").getElementsByTagName("button")[0];

Usually the id of the button won't stay the same in the page source. Click on view source in the HTML and look for that tag to find the new id. You can then use that id in something like:
document.getElementbyId("Export1_some_unique_id")...