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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

Method 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');
});

Method 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>

Method 4

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

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

Method 5

I know old question but with jquery u can use this approache:

Aspx file

<asp:Button ID="btnCalculate" ClientID="btnCalculate" runat="server" />

external js file

$("[ClientID='btnCalculate']").

https://lanitdev.wordpress.com/2009/06/08/extending-jquery-to-select-asp-controls/

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0