How can I access server controls from my external javascript file?

Question

When I use this "#<%= txtNumberOfDrugsInKit.ClientID %>" , I can access the server control from my jQuery script; but when I put this in an external script file, it does not work.

How can I access an asp text field from my external javascript file? I can’t believe this is not working.

Answer 1

I think the article will help you. http://lanitdev.wordpress.com/2009/06/08/extending-jquery-to-select-asp-controls/ +

I used this solution and it works great for selecting server controls without the need to add extra markup.

Answer 2

What I am doing is putting the script on my main page (not in an external file), which consists solely of an object definition like this:

 var Controls = { 'Name':<%="'" + txtNumberOfDrugsInKit.ClientID%>', 'OtherName':<%="'" + otherControl.ClientID%>' }; 

The trick here is that you have to put this in the header, or you cannot use it from external files, and therefore you need to add runat="server" in the declaration of the head element. This also explains why I use an object instead of simple variable names; it minimizes the likelihood of name collisions elsewhere (I only have the name "Controls").

Then I can use this Controls object in an external script as follows:

 var OtherElement = document.getElementById(Controls.OtherName); 

or

 var jQueryObj = $('#' + Controls.OtherName); 

See another example here:
Can I rely on ctl00_PagePlaceHolder_myId to stay the same?

Answer 3

I assume that #<%= txtNumberOfDrugsInKit.ClientID %> gets a server-side rating , therefore, of course, it does not work in external js, since they are served statically, and are not processed on the server side.

I think you do not quite know which code works on the server and what works on the client. One way to pass this data into an external script is to put it in a hidden input or hidden div, and then read from that DOM element in your external script.

Answer 4

"# <% = txtNumberOfDrugsInKit.ClientID%>" is most likely not executed in an external JS file, since it is not part of the ASP.NET page, you will have to hardcode the identifier.

But if you have problems with the "strange" identifier that ASP.NET generates, you can put the ClientID in a hidden field and read it from there in your external JS file

Answer 5

What I did in the past to get around this is to use the CSS name instead. In the txtNumberOfDrugsInKit control, you can do something like the following ...

 <asp:TextBox ID="txtNumberOfDrugsInKit" CssClass="txtNumberOfDrugsInKit" ... /> 

And then in your jQuery, instead of referencing it as $("#<%= txtNumberOfDrugsInKit.ClientID %>") , you can refer to it instead of the class name. In this case, you simply do $(".txtNumberOfDrugsInKit") . As long as you keep these selectors unique on your page - selecting only one control with it is not a problem.