3

I have a web page that contains a "div" element. On the page, there is javascript to reference the div: document.getElementById('divId'). This was working fine until another developer redesigned the page to use an ASP master page.

Now, document.getElementById('divId') returns null. It appears that ASP.net prepends some characters to the names of elements within contents forms when you use a master page. How can I know what the id of the div is when the page loads?

Update Allow me to give a specific example to clarify the question: My page had a div with ID divNotice. After changing my page to use a master page, I see when I print the source to the page that renders that the div ID is ctl00_ContentPlaceHolder1_divNotice. My question is, how am I supposed to know what the div ID is going to be when the framework is done with it?

2
  • Can you look at the HTML sources of several pages produced by ASP.net (e.g., in a browser)? Commented Jun 15, 2010 at 19:16
  • What version of the framework are you using? 4.0 allows you to set the client ID mode of any server control so that it doesn't get mangled. Commented Jun 15, 2010 at 19:20

4 Answers 4

10

I think that this is what you looking for.

document.getElementById('<%=divNotice.ClientID%>')

to get the ID of your element as appears on the html page use .ClientID

Hope this help.

Sign up to request clarification or add additional context in comments.

4 Comments

does this mean that you actually have to put this line of JS inside the ASP page in question?
ACCEPTED: Not only does this answer my question, but it also helped me track down another issue that cropped up where a previous developer used ClientID and it needed to be ID
@meo there is many ways on how you can place the ClientID on the page, this is one of them, other is to place a literal control and render all the code inside him, other way is to register it as script, other way is to place the ids on some values of javascript with RegisterScript, ...
If you really wish to understand this in depth, a good description is given here: asp.net/master-pages/tutorials/….
2

Dynamically create the javascript using Control.ClientID to determine the calculated ID of div.

document.getElementById('<%= DivControl.ClientID %>')

Or search for the element on the client side using the base ID as a search pattern. See here: A generic way to find ASP.NET ClientIDs with jQuery

I prefer the server side calculation, but if you don't do it often and/or your current design prohibits it, the client side way is a reasonable workaround.

Comments

1

you can check i the element exists by checking if it returns not null

if (document.getElementById('divId') != null) { /* do your stuff*/ }

in other words:

if (document.getElementById('divId')) { /* do your stuff*/ }

now you have edited you orginal question i got it.. i would do something like this:

var arrDivs = document.getElementsByTagName('div'),
    strDivName = "divId";

for (i=0;i<=arrDivs.length;i++){
    if( arrDivs[i].id.indexOf(strDivName) != -1) {
        alert("this is it")
    }
}

you can see a demo here: http://jsfiddle.net/pnHSw/2/

i think you could do it better with a regex.

But this is a pure JS way i don't know ASP.net

edit: i think Aristos solution is much cleaner :P

2 Comments

Obviously, I could. My question is that since it seems that using a master page causes the ID to change, how can I know what to expect it to change to?
a control that is within another control and has a runat="server" tag can get what is basically a control hierarchy prepended to its name. So myDiv will get transformed to something like ctl00_containerA_containerB_myDiv.
0

maybe you can use a descendent selector un css

<div id="wrapperControler">
    <controler id="controler"></controler>
</div>

wrapperControler controler{

 dosomething;

}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.