WebDrive WebDrive - 4 years ago 204
ASP.NET (C#) Question

document.getElementById() returns NULL when called from external JS file

I've looked through all the other questions/solutions related to this issue and can't find the solution.

I have a basic aspx page with a button. the OnClick calls a JS function. the Javascript function calls document.getElementById() which works. I then call a sub-function that lives in an external JA file and the same call fails. Why?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jstest.aspx.cs" Inherits="jstest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox runat="server" ID="RunAtStartup" OnClick="function1();" text="Click Me" />
</div>
</form>

<script>
function function1()
{
if (document.getElementById("<%= RunAtStartup.ClientID %>") == null)
alert('function1 null');
else
alert('function1 not null');
function2();
}
</script>
<script src="./function2.js"></script>
</body>
</html>


And the external javascript file function2.js is

function function2() {
if (document.getElementById("<%= RunAtStartup.ClientID %>") == null)
alert('function2 null');
else
alert('function2 not null');
}


The result of clicking the button will show that function1 is 'not null' and function2 is 'null'.

I've tried passing document in as a parameter, that did not work. I tried to do a function2().bind(document), that did not work. I stepped through the javascript debugger and it looks like the document object in function1 is identical to the document object in function2.

Thanks in advance
Michael

Answer Source

The name of the element, from what I can tell, is created by the ASP.net preprocessor. Since the JS file isn't parsed in ASP.net, it treats the selector literally, rather than as a real element ID. Therefore, this script cannot be run from and external JS file. In the ASP file, it replaces

<%= RunAtStartup.ClientID %>

with an actual element ID. The external file is looking for something like this:

<span id="<%= RunAtStartup.ClientID %>"></span>

Again, it treats the ID as a literal string, as if you ran it on a server without ASP.net installed. My solution would probably be to store the ID in a variable in the ASP.net file, like this:

var id = "<%= RunAtStartup.ClientID %>";

Then, the external JS file could use the following:

var element = document.getElementByID(id);

The external JS file would, of course, have to be included after the variable id is created. Alternatively, an even better solution would be to pass the ID as a function parameter, like this:

function function2(id) {
    if (document.getElementById(id) == null)
        alert('function2 null');
    else
        alert('function2 not null');
}

The ASP.net file could call the file like this:

function2("<%= RunAtStartup.ClientID %>");

This allows all ASP.net tags to be parsed server-side before being delivered to the client with the JS code.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download