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?

Answer 1

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

Answer 2

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;
    }
}

Answer 3

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);
  ...
}

}