Place JavaScript in external file. File doesn't works?

Question

I have GridView with CheckBox in it's header and another one in each row:

<asp:GridView runat="server">
<Columns>
<asp:TemplateField>
    <HeaderTemplate>
        <input type="checkbox" onclick="checkAll(this.checked)" />
    </HeaderTemplate>
    <ItemTemplate>
        <input name="checkSelect" type="checkbox" value='<%# Eval("ID") %>' />
    </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

I want master checkbox to (un)check all others.

So I have JavaScript function:

function checkAll(checked) {
    var grid = document.getElementById("<%= gridViewStatement.ClientID %>");
    for (i = 1; grid.rows.length - 1; i++) {
        grid.rows[i].getElementsByTagName("input")[0].checked = checked;
    }
}

If I put it inside <script> tag, its works

<script type="text/javascript" language="javascript">       
</script>

If I put function in file

<script type="text/javascript" language="javascript" src="scripts.js"></script>

it stops working! File in in the root, names written correctly.

What am I doing wrong??

P.S. Is there anything I can improve my function?

P.P.S. I use HtmlCheckBox instead of asp:CheckBox because I bind each to column 'ID' and get list of IDs in Request.Form. Am I right?

Traveling Tech Guy · Accepted Answer · 2009-08-18 22:06:34Z

4

What kills your script, IMHO, is the line:

var grid = document.getElementById("<%= gridViewStatement.ClientID %>");

You are mixing server-side and client-side code. Since the server-side code is rendered first, if that line is present inside the ASPX page, then the value of <%= gridViewStatement.ClientID %> gets evaluated in time for it to be used by the JavaScript. By putting it in a file that gets included later, you're ensuring that the value does not get interpreted.

Here's a short solution:
At the top of your ASPX include the following lines:

<script type="text/javascript" language="javascript">
    var gridID = "<%= gridViewStatement.ClientID %>";
</script>
<script type="text/javascript" language="javascript" src="scripts.js"></script>

And change the first line in your function to:

var grid = document.getElementById(gridID);

answered Aug 18, 2009 at 22:06

Traveling Tech Guy

27.9k25 gold badges117 silver badges167 bronze badges

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

3 Comments

Grant Wagner Over a year ago

+1. I like this better than passing the ClientID as a parameter in <input onclick> because it keeps all the JavaScript together. The only problem with this is that it pollutes the global namespace. I can see a few solutions to that, such as

var serverValues = { 'gridViewStatement.ClientID': "<%= gridViewStatement.ClientID %>", 'nextServer.Key': "<%= another.Value %>" };

then var grid = document.getElementById(serverValues['gridViewStatement.ClientID']);

Grant Wagner Over a year ago

One other benefit to a serverValues map is that the client-side code can now more accurately reflect where the server value came from. Of course, a downside is that you have tied your client-side map key to a server-side variable name, but the original code had that dependancy as well.

Traveling Tech Guy Over a year ago

Nice idea. I think I'll start using it from now on, rather than having a list of variables in the global scope. Thanks.

LorenVS · Accepted Answer · 2009-08-18 22:00:56Z

2

Your script contains a reference gridViewStatement.ClientID which is being evaluated on the asp.net page as an inline script. If you put it in an external file, this won't get evaluated and that script text will be in the javascript file on the client,which is not going to work because it doesn't have the proper id

answered Aug 18, 2009 at 22:00

LorenVS

12.9k10 gold badges49 silver badges57 bronze badges

Comments

abatishchev · Accepted Answer · 2009-08-18 22:07:29Z

1

Thanks to LorenVS!!

<input type="checkbox" onclick="checkAll('<%= gridViewStatement.ClientID %>', this.checked)" />

and

function checkAll(grid, checked) {
    var grid = document.getElementById(grid);
    for (i = 1; grid.rows.length - 1; i++) {
        var row = grid.rows[i];
        row.getElementsByTagName("input")[0].checked = checked;
    }
}

answered Aug 18, 2009 at 22:07

abatishchev

101k88 gold badges304 silver badges443 bronze badges

Comments

M4N · Accepted Answer · 2009-08-18 22:07:31Z

1

As LorenVS said. Probably you can change your ASPX so that the client id of the grid is passed to the javascript function:

<input type="checkbox"
  onclick='checkAll(this.checked, "<%= gridViewStatement.ClientID %>")' />

Then change your function to take the grid's client ID as a parameter:

function checkAll(checked, gridId) {
  var grid = document.getElementById(gridId);
  ...
}

}

answered Aug 18, 2009 at 22:07

M4N

96.9k45 gold badges225 silver badges265 bronze badges

Collectives™ on Stack Overflow

Place JavaScript in external file. File doesn't works?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related