How to get asp.net client id at external javascript file

When I use embedded javascript functions I can get client id of elements with this code:

document.getElementById('<%=buttonXXX.ClientID%>' )

But now I am using external javascript file for caching and faster rendering and this code does not work any more for getting client id's of elements, it gives error.

How can I get client id's of elements at external javascript file using asp.net 2.0 , netframework 3.5 , c# , iis 7.5

Solution 1:

I can suggest 2 ways.

First way

define your variables before call the javascript, inside the .aspx file that can be compiled.

var ButtonXXXID = <%=buttonXXX.ClientID%>
// and now include your javascript and use the variable ButtonXXXID

Second way

in the external javascript file, write your code as:

function oNameCls(ControlId1) {

    this.ControlId1 = ControlId1;

    this.DoYourWork1 = function() {
        // use the control id.
        // this.ControlId1
    }   
}

And call your actions like.

<script>
    // init - create
    var <%=this.ClientID%>MyCls = new oNameCls('<%=Control1.ClientID%>');
    // do your work
    <%=this.ClientID%>MyCls.DoYourWork1();
</script>

calling the action this way you prevent overwrite one action from one control with the same action from other controls on the same page.

Solution 2:

You could use a class selector. jquery might greatly simplify your life here. So you could apply a special class to the control:

<asp:LinkButton ID="foo" CssClass="foo" runat="server" Text="foo" />

and in your external javascript file once the DOM is ready you could reference the button using a class selector:

$(function() {
    var fooButton = $('.foo');
});

Solution 3:

in script file (test.js)

function test(ControlID1) {
  var controlId = document.getElementById(ControlID1);
  controlId.onchange = function () {        
    alert(controlId.value);
    }
  }

in .aspx file

<script type="text/javascript">
   var callTest = test('<%=txtSelected.ClientID%>');
   window.onload = callTest;
</script>

Solution 4:

I use the following code in my .js file, when I have no other better choice.

$("[id$='buttonXXX'])