getElementById in separate js file doesn't find ASP.net control

Question

When I have this in the page markup it works fine:

<script type="text/javascript">
    function bought1()
    {
        var s = '<%= Button2.ClientID %>';
        var v = document.getElementById(s);
        v.click();
    }    
</script>

But when I have the same thing in a separate file, even though the function is executed - the value of v remains null.

I tried with a simple div and it did find the div.

Why doesn't it find the ASP.net Button?

EDIT

I even added ClientIDMode="Static" to the Button. No change.

@Darren I checked with IE and FF js debuggers - they both give a `null` for `v`. — ispiro, Jul 17 '13 at 14:53
An immediate "fix" would be to give it a class and target that class. When put in a separate JS file, the `<%= Button2.ClientID %>` does **not** get evaluated because JavaScript files are not evaluated by the ASP.NET server - they are served statically. — Ian, Jul 17 '13 at 14:53
@ispiro - i mean view the actual source. See what gets rendered for `var s = '<%= Button2.ClientID %>';` etc... — Darren Wainwright, Jul 17 '13 at 14:54
also, as @ian says - the server tags `<% %>` won't work in a separate .js file. — Darren Wainwright, Jul 17 '13 at 14:55
@ispiro If you use `ClientIDMode="Static"`, then change your code to: `var s = 'Button2';` (and make sure you clear your browser's cache and reload the page) — Ian, Jul 17 '13 at 14:59
@Ian I did change it to `'<%= Button2 %>'`. But from Win's answer, assuming it's correct, I see that that won't help. (`Button2` will of course.) Thanks. — ispiro, Jul 17 '13 at 15:02
@ian - he meant change it to `var s = 'Button2';` and not `var s = '<%= Button2 %>';` - do this after putting `ClientIDMode="Static"` on your button — Darren Wainwright, Jul 17 '13 at 15:23

Win · Accepted Answer · 2013-07-17T15:04:17.680

<%= Button2.ClientID %> is a server code. You cannot run server code in a separate javascript file.

If you want to access Server Control ID from separate javascript, you need to make the ClientIDMode to either preditable or static.

Here is an example.

The following is a code. It is not a good example, but I hope you get the idea.

Note: Make sure you do not have same Ids when you use ClientIDMode="Static". Otherwise, Ids will collide. For example, one in master page and one in content page.

ASPX

<script src="/JavaScript1.js"></script>
<asp:Button runat="server" ID="Button1" ClientIDMode="Static" 
    Text="I am a button" />
<div onclick="bought1()">Click Me</div>

Javascript File

function bought1() {
    var s = 'Button1';
    var v = document.getElementById(s);
    v.click();
}

enter image description here

MaxPRafferty · Answer 2 · 2013-07-17T14:59:54.590

4

Win is correct, your separate JS file will not be rendered by ASP.net.

However, if you simply put

<script type="text/javascript">
        var s = '<%= Button2.ClientID %>';
</script>

above where you load your external file, you will load the value into a global on the page that will be accessible from any scripts loaded after it. Just make sure to give it a name that wont collide with any libraries you have loaded.

edited Jul 17 '13 at 14:59

answered Jul 17 '13 at 14:51

MaxPRafferty

4,819
4
32
39

1

That's exactly what the `ClientID ` is for (see [here](http://stackoverflow.com/a/1119035/939213).) And besides - it _does_ work in the first case. – ispiro Jul 17 '13 at 14:52
Ah, misunderstood question. Updated! – MaxPRafferty Jul 17 '13 at 15:00
You mean that I'll be able to use `s` in the external file? That looks like a good solution. Thanks. – ispiro Jul 17 '13 at 15:06
@ispiro Yeah, since it's declared globally, you can access it from any scope in JavaScript – Ian Jul 17 '13 at 15:48

score 2 · Answer 3 · answered Jul 17 '13 at 15:05

2

You should Change the function like this:

function bought1(clientId)
{
    var s = clientId;
    var v = document.getElementById(s);
    v.click();
}

and would call it in your page markup:

bought1('<%= Button2.ClientID %>')

answered Jul 17 '13 at 15:05

Abbas Amiri

3,074
1
23
23

score 1 · Answer 4 · answered Jul 17 '13 at 15:17

1

Alternatively, if you want to avoid the messiness of JS globals and dumping asp.net variables altogether, just wrap your button and use a queryselector (or jquery, etc) to grab it:

asp.net:

<div id="button-container">
        <asp:Button ID="button" runat="server" />
</div>

JS:

<script type="text/javascript">
    function bought1()
    {
        var v = document.querySelector("#button-container input");
        v.click();
    }    
</script>

answered Jul 17 '13 at 15:17

MaxPRafferty

4,819
4
32
39

Or `document.getElementById("button-container").children[0]`. Good idea though :) – Ian Jul 17 '13 at 15:24
I mostly just like document.querySelector, heh. Also i couldn't remember if .net added any other markup around the button, but thankfully it doesn't. – MaxPRafferty Jul 17 '13 at 15:35
Oh I do too, I just thought for this very specific example, my example would work too, and have "better" browser support. Yeah, luckily for a button, it doesn't add extra markup, but would ruin my solution if it did. – Ian Jul 17 '13 at 15:40
Yep, getElementById is definitely the way to go for anybody targeting a wide audience. – MaxPRafferty Jul 17 '13 at 15:44

getElementById in separate js file doesn't find ASP.net control

4 Answers4

ASPX

Javascript File

Linked