GetElementByID() - Woes
Background
Many times I use GetElementByID() in Javascript to turn on and off items in an
HTML pages based on certain conditions. - GetElementByID() is one of the most
easiest ways to do this.
But when you switch to asp.net and start using master pages, you've got to jump
through a couple of hoops to get this to perform the way you expect.
The easiest way to demonstrate this is to show you examples in both HTML and
aspx. - Let's say we have a couple of <div>.....</div> tags
containing some stuff we want to hide or unhide if the user clicks a button (fairly
common usage). - Here's one way it can be done:
HTML example:
---------------- cut line ------------------
<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
<script language="Javascript">
function buttonclick() {
x = document.getElementById("Div1");
x.style.display = (x.style.display == "none") ? "block" : "none";
x = document.getElementById("Div2");
x.style.display = (x.style.display == "none") ? "block" : "none";
}
</script>
</head>
<body>
This is a test page showing how to hide/unhide a <div> using a button and
Javascript. - Click the button in this <div> to hide it and expose the
hidden <div>. - Click the button in the hidden <div> to revert
back.<p>
<div id="Div1" style="background-color:Yellow">
This 'div' was not hidden when the page loaded.<p>
<center><input type="button" value='Click me to un-hide the hidden div'
onclick='buttonclick1()'></center>
</div>
<div id="Div2" style="display:none;background-color:Aqua">
This text was hidden when the page loaded but exposed when the button
was clicked.<p>
<center><input type="button" value='Click me to revert to the original div'
onclick='buttonclick2()'></center>
</div>
</body>
</html>
------------------ cut line ----------------------------------
ASP.Net (2.0) example:
Please note that I'll be tossing all the proper formatting, etc. to make this
thing XHTML 1.0 Transitional compliant. - I'm also using a master page and
VB in a separate 'code behind' file. - I'll also bold important sections that
we'll talk about at the end of the code listing.
------------- Start Code Listing ----------------
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"
AutoEventWireup="false" CodeFile="Element_by_ID.aspx.vb"
Inherits="Javascript_Element_by_ID" title="Test ElementbyID() Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
Runat="Server">
<script language="Javascript">
function buttonclick(){
x = document.getElementById("<%=Div1.ClientID %>");
x.style.display = (x.style.display == "none") ? "block" : "none";
x = document.getElementById("<%=Div2.ClientID %>");
x.style.display = (x.style.display == "none") ? "block" : "none";
}
</script>
<p>This is a test page showing how to hide/unhide a <div> using a button
and Javascript. - Click the button in this <div> to hide it and expose the
hidden <div>. - Click the button in the hidden <div> to revert
back.</p>
<div id="Div1" runat="server" style="background-color:Yellow">
<p>This 'div' was not hidden when the page loaded.</p>
<center><input type="button" value='Click me to un-hide the hidden div'
onclick='buttonclick()' /></center>
</div>
<div id="Div2" runat="server"
style="display:none;background-color:Aqua">
<p>This text was hidden when the page loaded but exposed when the button
was clicked.</p>
<center><input type="button" value='Click me to revert to the original div'
onclick='buttonclick()' /></center>
</div>
</asp:Content>
------------- End Code Listing ----------------
NOTES:
- The documentGetElementBy ID line.... See how we have to use the funny
looking way we have to designate what element we want using asp.net versus HTML? -
That's because the .aspx page is rendered along with the master page and turned into
HTML when it's sent to the browser. - In fact, if you did a 'view source' in your
browser, you'd see something like:
x = document.getElementById("ctl00_MainContent_Div1"); - If you look at
what you've got defined for 'content ids', etc., long enough maybe you'd understand
it (I'm still trying). - I'm guessing the 'ct100_' part indicates how many sub-dirs
deep from the server's root this page exists.
- The <div> lines MUST include runat="server" - That's the only way
asp.net will be able to figure out how to make the Javascript work.
An Example:
Here is an example based on the above code for asp.net 2.0:
-------Begin----------
-------End----------
More Notes, Tips, and Gotcha's...
- <input type="button"...........> If you really want to be
true blue to asp.net, then you should get into the habit of
using 'asp:button' instead. - Of course if you do this, you'll find that it's not so
easy to kick off a Javascript as you are used to with HTML (as I've learned). - Also,
sometimes, you may have no choice but to use an asp:button. - But all is not lost. -
Please see our page on 'onclick()' in this same Javascript section to learn
how to make this work. - (FYI - I used 'input type="button"' with this demo and it
works fine for me anyway.)
- Location 1: The way the document.GetElementByID lines are written
make it impossible to re-locate the Javascript function in this file to someplace
like the <head> section of the master.file. - Perhaps with a little massaging,
this could be done (if you really wanted too). - I don't bother, besides I like the
KISS principle.
- Location 2: Similar to 'Location 1', you also cannot place your
Javascript function(s) as we are using in a separate 'src' file and have your
Javascript script command load it when the page loads. - This is because it's simply
not there for asp.net to 'see' and alter it's
document.GetElementById parameters when asp.net renders the page into HTML to send
to the browser.
Did this page help?
We hope this page helped at least a little bit.
If you have any comments, criticism, whatever, we'd be happy to here from you.
|