My scenario is when loading a page, dim out the background and show the progress
bar in a popup panel until finishing page load.My problem is that document.getElementById('ctl00_ContentPlaceHolder1_Label1') work fine but
document.getElementById('page_backgnd') can't. neither document.getElementById('progressBar').
it is strange to me that they can pass the compilor of Vs2005&vs2008. if I use
document.getElementById('ctl00_ContentPlaceHolder1_page_backgnd') or
document.getElementById("<% =page_backgnd.ClientID %> ")
, they don't even pass the compilor. while in the mean time, I can saw in
the course code behind is: <div id="page_backgnd"> and <span id="ctl00_ContentPlaceHolder1_ResultsSpan"></span>....
Does anybody know what I am missing or how to
solve this in another way?Thanks in advance
my javacript like this:<script type="text/javascript" >
//disable background element and show progress bar in a popup panel
function ShowCustomScreen()
{
var page_backgnd = document.getElementById('page_backgnd');
page_backgnd.style.height = self.screen.availHeight+'px';
page_backgnd.style.display = 'block';
}function ShowProgressBar()
{
var progressBar = document.getElementById('progressBar');
progressBar.style.left = "100px";
progressBar.style.top = "200px";
progressBar.style.display = 'block';
}
</script>my page like this:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Label">Input:</asp:Label><div id="page_backgnd">
</div><P>some pragraph...</p>
<div id="progressBar">
<p>Please Wait, Processing...</p>
<center><img src="Images/progress_bar.gif" alt="progressImage"/></center>
</div></asp:Content>
![]() |
0 |
![]() |
Have you considered running the page and using the View->Source option in the browser to see what gets actually built? That way, you can locate the item you want to change in the page and know exactly what to call it when your code-behind goes looking for it.
![]() |
0 |
![]() |
Have you considered running the page and using the View->Source option in the browser to see what gets actually built? That way, you can locate the item you want to change in the page and know exactly what to call it when your code-behind goes looking for it.
![]() |
0 |
![]() |
Yes, I have tried and that's how these things too strange to me. in the source file from the browser, it shows the label id like:'ctl00_ContentPlaceHolder1_Label1' while the div id like: <div id="page_backgnd"> , the same as usual(before added master page). but it's strange that I can access the label but not the div element. Any idea how to get it?
![]() |
0 |
![]() |
two ideas:
- try putting a runat="server" into the div. might make a difference. might not. post back to let us know... :)
- The FindControl is not recursive, it only finds the "top level" of controls within the control it starts searching from. Try using this recursive findcontrol method:<http://forums.asp.net/p/1107107/1696269.aspx#1696269>. People have posted several versions since I first saw this thread, you may have to fiddle a bit to find the right one.
As for what is going on with the "extra" stuff in the names, that's intentional. In an aspx page, you define one occurrence of a field in a gridview row. However, when the gridview is actually used in a running page, there may be many occurrences of that field. Each will need a unique name. Certain controls are considered "naming containers" and will add stuff to the names of the items within them. If you nest naming containers, they seem to make the name changes additive with one another (i.e., they all contribute to the name of the controls within them.)
![]() |
0 |
![]() |
Thanks for your ideas:
first, the runat="server" make a difference. now the div name in the source file changes from <div id="page_backgnd"> to <div id="ctl00_ContentPlaceHolder1_page_backgnd">. However, the result is still the same as before. sounds still can't get control on it.
Page.FindControl is used in C# code behind file, right? I understand that's not good place for me as I am trying javascipt on the client side. during a long time waiting for server processing, I dim out the background and showing progress bar, I call an asynchronous method on the server and catch the result back in this javascript file.this works fine without masterpage. so the easiest way is still to use document.getElementByID() on javascript rather than introduce server side Page.FindControl unless that's impossible.
![]() |
0 |
![]() |
try use this id ctl00_ContentPlaceHolder1_page_backgnd
instead of page_backgnd, i think this the work around unless there is another way to do it.
Bryian Tan
MCP, MCAD
![]() |
0 |
![]() |
Hi,
You can declare JavaScript and HTML Code together in the same aspx page.
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript" >
...
</script>
<asp:Label ID="Label1" runat="server" Text="Label">Input:</asp:Label>...Your HTML code.
</asp:Content>
You can use document.getElementById("<%=Control.ClientID%>") for the server control and use document.getElementById('control_ID') for HTML control.
So document.getElementById("<% =page_backgnd.ClientID %> ") is not correct unless page_backgnd is runat=server.
document.getElementById('ctl00_ContentPlaceHolder1_Label1') is fine but you had better use document.getElementById("<%=Label1.ClientID%>") insteads.
Would you tell us if the codes are used in FireFox and what the javascript error you encounter.
In your scenario, I think document.getElementById('page_backgnd') is fine in IE.
Hope it helps.
Vince Xu
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
![]() |
0 |
![]() |
Thanks for all of your contributions. Those are helpful toward the solution. but my code still act wirld. now I my html elements and javascript are in one page like the following, the code works fine without masterpage but can't dim out the background after added masterpage(although my masterpage doing nothing). I am not sure what's wrong here, is the object.style.display wrong or anything else?
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="page_backgnd"> </div>
<
script type ="text/javascript" >function ShowCustomScreen()
{
var page_backgnd = document.getElementById('page_backgnd');
page_backgnd.style.height = self.screen.availHeight+'px';
page_backgnd.style.display = 'block';
}</script>
</
asp:Content>
![]() |
0 |
![]() |