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 textbox from my external JavaScript file? I cant believe this is not working.

Answer 1

What I do is put a script on my main page (not in an external file) that 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 can't use it from external files, and so you have to add runat="server" to your head element declaration. This also explains why I use an object rather than simple variable names; it minimizes the chance for a naming collision elsewhere (I only have the "Controls" name to worry about).

Then I can use that Controls object in an external script like this:

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

or

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

See another example here:
Can I count on ctl00_PagePlaceHolder_myId staying the same?

Answer 2

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

I have used this solution and it works very well to select server controls without having to add extra markup.

Answer 3

I assume #<%= txtNumberOfDrugsInKit.ClientID %> gets evaluated on the server side , so of course it doesnt work in an external js, because those are served statically, not processed on the server side.

I think you are not fully aware of what code runs on the server and what runs on the client. One way of passing that data into your external script is putting it into a hidden input, or a hidden div, and then reading from that DOM element in your external script.

Answer 4

"#<%= txtNumberOfDrugsInKit.ClientID %>" is most likely not executed in a external JS file as it is not part of the ASP.NET page You'll have to "hardcode" the ID.

But if you have problems with "weird" ID's that ASP.NET generates, then you can put the ClientID into a hidden field and read it from there in your external JS file

Answer 5

What I've done in the past to get around this is to use a CSS name instead. On your txtNumberOfDrugsInKit control, you could 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 reference it by class name instead. In that case, you'd just do $(".txtNumberOfDrugsInKit") . As long as you keep those selectors unique on your page - picking up just the one control with it is no problem at all.