How to use document.getElementById() to get a div in a web page using masterpage?

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'); = self.screen.availHeight+'px'; = 'block';

function  ShowProgressBar()
    var progressBar = document.getElementById('progressBar'); = "100px";  = "200px"; = 'block';


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">

 <P>some pragraph...</p>

 <div id="progressBar">
        <p>Please Wait, Processing...</p>
        <center><img  src="Images/progress_bar.gif" alt="progressImage"/></center>



3/27/2008 7:24:22 PM 91979 articles. 4 followers. Follow

8 Replies

Similar Articles

[PageSpeed] 31
Get it on Google Play
Get it on Apple App Store

 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.

3/28/2008 7:09:02 AM

 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.

3/28/2008 7:16:08 AM

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?

3/28/2008 12:08:17 PM

 two ideas:

  1.  try putting a runat="server" into the div.  might make a difference. might not. post back to let us know... :)
  2. 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:<>.  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.)


3/28/2008 12:31:16 PM

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.

3/28/2008 1:37:10 PM

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
3/28/2008 10:57:56 PM


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" >
 <asp:Label ID="Label1" runat="server" Text="Label">Input:</asp:Label>

   ...Your HTML code.


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.
3/31/2008 6:38:57 AM

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 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'); = self.screen.availHeight+'px'; = 'block';



4/1/2008 4:14:42 PM

Similar Artilces:

How to get HTML Source of web page opened by web browser using
hello friends,         i have opened an web browser in using the below code Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click Dim nullObject As System.Object = 0 Dim str As String = "" Dim nullObjStr As System.Object = str Windows.Forms.Cursor.Current = Cursors.WaitCursor Dim i As Int16 For i = 1 To 2 AxWebBrowser1.Navigate("", True) AxWebBrowser1.Document. Next Windows.Forms.Cursor.Current = Cursors.Default End Sub  ...

How to get new web app to use .NET 2.0 on Win2K server using .NET 1.1 as default framework?
I have .net framework1.1 and 2.0 on our server running win2K. i have existing applications that uses 1.1, i also have a new app that use 2.0.  how can i set my new .NET 2.0 app to point to 2.0 without messing up my existing .NET 1.1 apps? To specify the ASP .Net version fro a web application, do the followingIn IIS Manager select the web application -> Properties -> ASP.Net TabSelect  ASP.Net version you want to use for the applicationRegards,PrashantDont forget to click "Mark as Answer" on the post that helped you. But I am running Win2K...

How to get the HREF value of the Anchor tag in a web page using the web browser control in
Hi Friends,               i have a webserver control in my application.i load the web browser control on a button click using the below code Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click                AxWebBrowser1.Navigate("", False) End sub once the page is loaded in the browser i want the <a> HREF value in that page.For example if that page has ...

How can i use javasrcipt or xmlhttprequest to get the image outputed by an web page?
How can i use javasrcipt or xmlhttprequest to receive the image outputed by an web page? the webpage like this  protected void Page_Load(object sender, EventArgs e)    {        string strQueryFileName = Request.QueryString["filename"];         string strLocalPath = Server.MapPath(path);        Bitmap  theReturnImage = new Bitmap(strLocalPath);         theReturnImage.Save(ms, ImageFormat.Jpeg); &n...

Cannot get page using master page to use enctype="multipart/data"
I am working with the PWS photo albums admin, and I cannot get the Page to accept a .bmp or .png image via the FileUpload control. I am using master pages, and I thought this might be the problem. If any of you are experimenting with PWS, try uploading a .bmp, .tiff or .png and you will see what I mean. Any advice how to work around this would be very appreciated. Thank you.If I am not learning patterns and practices, I am not harnessing the power of .NET You are totally on the wrong track if you feel that its the MasterPage/Enctype preventing your users from uploading images other tha...

getting the id of div tag in one page to another page using javascript
hi, am designing 2 usercontrols and i want the id of div tag in  usercontrol1.ascx to usercontrol2.ascx  using javascript if anybody can help me soon am very thankfull  You could save it in a cookie and retrieve it on the next page. sorry, i dont understand what u have senti just want the id of my div tag in one usercontrol to another usercontrol using javacsript if u can send me the code am very thankfull  Hi, May be you can explain your problem a little more. As when you use user controls in one common page then...

Do not get expected WEb page on secondary
netware 6.5 sp2 Have setup a web page on a seconary IP address Load appache with the following command line LOAD ADDRESS SPACE = CSMI APACHE2 -f SYS:APACHE2\CSMI\SERVER\HTTPD.CONF Where HTTPD.CONF is set up to Listen which is a secondary ip address A display secondary ipaddress at the server lists the seconary ipaddress I can ping the secondary ip address from the client in Remote manager using IP Address management the secondary IP addresses are not listed When I attempt to brose to the HTTP:// address I do not see the web page I...

Why we use Web.Config File for connection string wether we can use class Library for get connection for whole web Application
 Why we use Web.Config File for connection string wether we can use class Library for get connection for whole web Application  please help me? Friend, Web.config has its own advantages. 1) Web.Config is used to store the important information like connections strings that it can be modified even after the code has been    deployed to the server without compiling the entire application again. 2) Since it is a XML file, there is no need of building the project of you are going to change the connection strings.   If you go for the class files,...

Using firefox is getting to be a pain because your popups keep me from getting on the web.
Name: betsy price Email: betsypriceatgmaildotcom Product: Firefox Summary: Using firefox is getting to be a pain because your popups keep me from getting on the web. Comments: Please just let me get on to my browser. Browser Details: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1b4) Gecko/20090423 Firefox/3.5b4 (.NET CLR 3.5.30729) From URL: Note to readers: Hendrix gives no expectation of a response to this feedback but if you wish to provide one you must BCC (not CC) the sender for them to see it. ...

trying to get a simple url page using lwp but getting a 500 error
I am using the .bat file which comes with LWP called lwp-download.bat. When I type: lwp-download http:\\ the reponse I get is: lwp-download: 500 Can't connect to :80 (Bad hostname ' ') I this this error message no matter what I try, and being brand new to LWP and rather new to Perl, I have no idea what to try next.... Thanks for any help I receive in advance!!!! your url is not correct. it should be http:// and not http:\\ ----- Original Message ----- From: "Ken Soenen" <Ken.Soenen@TRACO.COM> To: <

Using Web Service -xs https
ASA Hello, Step one of two is done. Got my mobilink service to use encryption, now I am working on getting another app that uses ASA web services. I can hit the app using -xs http just fine. I then turn on the security required checkbox under webservices in Sybase Central. That forces connections to use https. I am using gencert to make my certificates. With my mobilink certificate I used ECC_TLS. I read in the documentation that RSA needs to be used for https... so I used gencert to create an RSA certificate. Following the documentation, it says: -xs protoco...

where can i get a complete tutorial that will get me seriously started on using the objectdatasource effectively
It looks like using the objectdatasource is the way to go. will some one point to a tutorial that will get me seriously started on using the objectdatasource effectively.--------------------------------------------------No Project Too Eazy.-------------------------------------------------- First one uses typed datasets, second one uses custom business objects.  Both excellent tutorials. Regards Mike [MVP - ASP/ASP.NET]My site...

Problem getting Ajax to work on Pages using MasterPage File
I have a situation that I am in desperate need of help with. I am trying to get Ajax working on our server machine so we can test forms that have ajax controls embedded. I have had to move the Ajax extensions dll to the bin folder since I suspect my Server is not Ajax enabled. On a Standalone page, I can successfully use Ajax on the server, but when I try to use Ajax by dropping the scriptmanager on the masterpage and then using an UpdatePanel control on a child page contained in the content section I get the following error message ....   Server Error in '/' Applic...

How to get an Bar Chart in the Web page using the Data Base
 Hi Friend,    I need to draw a Bar charts in the Web Form using the data form the Data Base with different style.    I am using C# as a code-behind.     Can any body help me........    With Regards.    V.T. Solaimalai. With Regards,Solaimalai V.T Hi, please take a look at this article: Grz, Kris.Read my blog. Handy Firefox plugins for web developers.Workaround for non working Mark as answer buttons.  hi V.T. Solaimalai. using Crystal r...

Web resources about - How to use document.getElementById() to get a div in a web page using masterpage? -

snippet1 : var logbox = document.getElementById('login'); var regbox -
snippet1 : var logbox = document.getElementById('login'); var regbox = document.getElementById('register'); logbox.onclick = switchScreen('login'); ...

How to upload videos - YouTube Help
function highlight(btn) { var btnArray = document.getElementById("btns").getElementsByTagName("img"); for (var i=0; i The upload page offers ...

JavaScript - Wikipedia, the free encyclopedia
programming styles. JavaScript was formalized in the ECMAScript language standard and is primarily used in the form of client-side JavaScript ... - Videos
km_nickname_text_com km_kmcom_js_begin_com kmcom_add_trigger("readcomplete","if(typeof(document.getElementById('km_unique_string_com_gender') ...

Media Statements - SiteMap
Media Statements of the Premier and Ministers of the Western Australia State Government. Media releases.

')[0];if(window.tumblrNotesLoaded)if(tumblrNotesLoaded(notes_html)==false)return;var more_notes_link=document.getElementById('more_notes_19320621086');var ...

';document.getElementById('map-bubble').style.visibility='visible';" onmouseout="document.getElementById('map-bubble').style.visibility='hidden';" ...

Swisscom - International Kommunizieren
"; oPW.document.write(y); oPW.document.close(); } function toggleLayer(pPageId, layerId) { el = document.getElementById(pPageId+'_lay'+layerId); ...

中国经济新闻网-专业、负责任的经济媒体 5){alert('错误的页码');document.getElementById('_PageBar_Index_0').focus();}else{var PageIndex = (document.getElementById('_P ...

Salvatore Ferragamo2013度假lookbook_流行趋势_GQ男士网
酷夏已至,正是度假季,Salvatore Ferragamo此时为即将外出休闲的男人们奉上柔滑丝质的精美面料做成的宽松外套长裤,配以橘色,绿松石色,奢华中尽显休闲。 0){ addcollect(28145,document.getElementById('myfavinfo'). ...

Resources last updated: 2/12/2016 6:26:30 AM