0

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.

Crescent Fresh
  • 115,249
  • 25
  • 154
  • 140
Orson
  • 14,981
  • 11
  • 56
  • 70
  • 1
    See http://stackoverflow.com/questions/844970/is-there-a-better-way-to-get-clientids-into-external-js-files and http://stackoverflow.com/questions/1232465/how-to-use-jquery-select-element-by-id-and-asp-net-without-putting-ctl00-everyw/1232498#1232498 for a couple of general solutions to this. See http://stackoverflow.com/questions/497802/how-to-stop-asp-net-from-changing-ids-in-order-to-use-jquery/497872#497872 for a jQuery solution. – Crescent Fresh Dec 07 '09 at 16:33

5 Answers5

3

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?

Community
  • 1
  • 1
Joel Coehoorn
  • 399,467
  • 113
  • 570
  • 794
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.

Tim Banks
  • 7,099
  • 5
  • 31
  • 28
0

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.

mkoryak
  • 57,086
  • 61
  • 201
  • 257
0

"#<%= 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

Jan Hančič
  • 53,269
  • 16
  • 95
  • 99
0

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.

Scott Ivey
  • 40,768
  • 21
  • 80
  • 118
  • Note that selecting elements via class names is quite slower than by IDs. See this: http://www.componenthouse.com/article-19 – Jan Hančič Dec 07 '09 at 16:44
  • To this date, i have never had a place where it's ever been noticable. For things like this - code first, optimize later - and then only optimize what needs it. jQuery selectors have never been on my list of something that needed to be optimized. – Scott Ivey Dec 07 '09 at 17:02