javascript getElementById returns null

Imar · October 11th, 2006, 03:10 PM

Can you show us the final HTML markup for the page? Where do you include the external JavaScript? In the master page or in the content page?

With regards to number 4: yes I have, in many sites. The only issues I have ever run into is referencing the correct JavaScript file in the master (you can't use the ~ syntax in the path, so I usually use a root based path which brings some problems of its own) and the changed names of page elements. Using ClientID usually solves that problem.

If you post your code, I may be able to recommend something.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
While typing this post, I was listening to: Atmosphere by Joy Division (Track 3 from the album: Heart And Soul (CD 2)) What's This?

VictorVictor · October 11th, 2006, 04:18 PM

Imar and other responders:

Thanks for the help. I have found the problem and the solution.

Turns out that with master - content pages the value for the attribute ID on a control in the content place holder area gets changed. gbianchi put me onto that. I checked and found that what is, id = "Label2" in the source becomes "ctl00_ContentPlaceHolder1_Label2" in the executable. Thus, changing the javascript function as follows, will result in x being an object, and not null.
// JScript File
function button1_onclick() {
    var x = document.getElementById("ctl00_ContentPlaceHolder1 _Label2");
    if (x == null) {
        alert("x is null.");
        }
    else {
        alert("Label's text is: " + x.innerText);
    }
}

A few things to note:

1. The ctl00 is lowercase letters C, T, and L followed by numbers 00. That is, there is not a number one hundred. !@#$#$%^$%^*&%^(*&.

2. The redefined function works whether it is in line on the page, in a script block, or in a separate .js file.

3. Note that you can use debug checkpoint only if you put your javascript in a separate file. A much better way to debug.

4. I note from the values obtainable in the debug time Immediate Window that the converted names of master page objects are also available. In other words your javascript can manipulate any and all controls on a derived page regardless of where they originated.

5. Imar: In attempting to get a peek at the final compiled and rendered page to send to you, I found the difference in names. Thanks for that. Also, I'm not sure but I think you are going to some extra trouble (with your naming comments). If you use the aspx page's prerender event handler to register your javascript (one line of code) as shown below... that's all you need to call any external file javascript functions on an aspx page.
For example:

Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        Me.ClientScript.RegisterClientScriptInclude("xxx", "Default.js")
    End Sub
End Class

Thanks.

VV

Imar · October 11th, 2006, 04:39 PM

If with "with your naming comments" you're referring to my comment about changed names and ClientID, I think you misunderstood me.

ClientID is a control property that returns the client side ID of any server side control with its full naming container prefixes. So, in your case, it would return ctl00_ContentPlaceHolder1_Label2 instead of Label2. You can use that tweak client side code with the correct ID. Consider the following JavaScript:

Code:

      <script type="text/javascript">
        var x = document.getElementById('<%= Label2.ClientID %>');
      </script>

      <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

Notice the embedded call to Label2.ClientID. At run-time, that's replaced with the Label's client id:

var x = document.getElementById("ctl00_ContentPlaceHolder1 _Label2");

No more messing around with JavaScript debuggers. And better yet: you get a compile-time warning when you rename Label2 to something else.

This doesn't work with external files, but personally I would never hard code control names in external files anyway. Instead, I pass the Id to a method in an external file and use a parameter from there.

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
While typing this post, I was listening to: Exercise One (Peel Sessions) by Joy Division (Track 8 from the album: Heart And Soul (CD 3 - Studio Rarities & Unreleased)) What's This?

VictorVictor · October 12th, 2006, 11:32 AM

Thanks Ivar. I can see that using the ClientID property is a better way of getting the required *name* arg for the getElementById function. If only I had known... I would have not spent hours and hours in the debug immediate page drilling down to find the changed name of the control.
For anyone interested in the general problem of employing a javascript function in an ASP.NET 2 project which employs content pages inherited from a master page, I offer the following complete mini project as an illustration on how to do it. You may know of an even better way. (I have had several emails from folks who have had difficulty in that kind of situation.) However the code shown below works. And, employing Imar's suggestion above (using ClientID) would make it even better.
--------------------------

Here is a complete ASP.NET 2.0 project (VB) employing a master page and a derived content page. The program demonstrates how one would go about using javascript (button click on the content page) to change the value of two labels: one inherited from the master page and one on the content page. Once one sees the technique employed, one can extend the principle in any number of ways for much clientside manipulation.

VV
-----------------------------------------

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <asp:Label ID="Label1" runat="server" Style="z-index: 100; left: 24px; position: absolute;
            top: 24px" Text="111111" Width="136px"></asp:Label>
        <br />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>
---------------------------------------
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"
    AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Label ID="Label2" runat="server" Style="left: 68px; position: absolute;
        top: 128px" Text="222222" Width="76px"></asp:Label>
    <input id="Button1" style="left: 36px; position: absolute; top: 160px" type="button"
        value="html Button1" onclick="button1_onclick()" />
    <script language="javascript" type="text/javascript" src="Default.js"></script>
</asp:Content>
---------------------------------------
Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        Me.ClientScript.RegisterClientScriptInclude("xxx", "Default.js")
    End Sub
End Class
---------------------------------------
// JScript File
function button1_onclick() {
    var x = document.getElementById("ctl00_ContentPlaceHolder1 _Label2");
    x.innerText = "asdf";
    var y = document.getElementById("ctl00_Label1");
    y.innerText = "4567";
}
---------------------------------------

IOnlyLikeRooiBosTea · January 15th, 2010, 05:59 PM

According to IMAR's statement: "ClientID is a control property that returns the client side ID of any server side control with its full naming container prefixes. It would return ctl00_ContentPlaceHolder1_Label2 instead of Label2."

This tweak client side code "var x = document.getElementById('<%= <ControlName>.ClientID %>'); "with the correct ID of course should be used instead of hard coded "var x = document.getElementById("ctl00_ContentPlaceHolder1 _<ControlName>") ".

So far so good. This statements is rather straighforward, thanks IMAR! Moreover .... IMAR stated as well: This doesn't work with external files. According IMAR reply on VictorVictor, he personally, would never hard code control names in external files. Instead, he passes the Id to a method in an external file and use a parameter from there.

So,

finally my question: How?

I have been fiddlling around with VictorVictor's tutorial to pass the value of the innerHTML property of an element found by document.getElementById("ctl00_ContentPlaceHolder1 _<ControlName>") however not by use of: document.getElementById("<%=<ControlName>.ClientID %>")

Is it possible for IMAR to show the way he should implement with the use the tutorial of VictorVictor .. that would be nice!! Thanks on behave of the RooiBosTea community.

Imar · January 15th, 2010, 06:53 PM

Hi there,

Suppose you have a JavaScript function like this:

function SomeMethod(element)
{
var myElement = document.getElementById(element);
}

This method expects the ID of an element and then calls getElementById to get a refence to it. From your ASPX page, you can call the method like this:

<script ...>
SomeMethod ('<%=Button1.ClientID%>');
</script>

This sends the ClientID of Button1 as a string to SomeMethod.

Hope this helps,

Imar