15

In implementing my first significant script using jquery I needed to find a specific web-control on the page. Since I work with DotNetNuke, there is no guaranteeing the controls ClientID since the container control may change from site to site. I ended up using an attribute selector that looks for an ID that ends with the control's server ID.

$("select[id$='cboPanes']")

This seems like it might not be the best method. Is there another way to do this?

@Roosteronacid - While I am getting the controls I want, I try to follow the idioms for a given technology/language. When I program in C#, I try to do it in the way that best takes advantage of C# features. As this is my first effort at really using jQuery, and since this will be used by 10's of thousands of users, I want to make sure I am creating code that is also a good example for others.

@toohool - that would definitely work, but unfortunately I need to keep the javascript in separate files for performance reasons. You can't really take advantage of caching very well if you inline the javascript since each "page" is dynamically generated. I would end up sending the same javascript to the client over and over again just because other content on the page changed.

@Roosteronacid - While I am getting the controls I want, I try to follow the idioms for a given technology/language. When I program in C#, I try to do it in the way that best takes advantage of C# features. As this is my first effort at really using jQuery, and since this will be used by 10's of thousands of users, I want to make sure I am creating code that is also a good example for others.

@toohool - that would definitely work, but unfortunately I need to keep the javascript in separate files for performance reasons. You can't really take advantage of caching very well if you inline the javascript since each "page" is dynamically generated. I would end up sending the same javascript to the client over and over again just because other content on the page changed.

Joe Brinkman
  • 1,842
  • 2
  • 16
  • 20

4 Answers4

8
$("#<%= cboPanes.ClientID %>")

This will dynamically inject the DOM ID of the control. Of course, this means your JS has to be in an ASPX file, not in an external JS file.

toohool
  • 1,067
  • 1
  • 9
  • 13
  • Yea thats great, if you need even more unnecessary text on the page and an even more uncomfortable reading experience. – Piotr Kula Jul 16 '14 at 15:08
3

One thing that I have done in the past (in JavaScript not jQuery), in the above my JavaScript imports, is output the dynamic controls ID's similiar to what toohool recommends and assign them to variables that I reference in my script imports.

Something like this, should allow you to take advantage of caching and still enable you to have the exact client IDs:

<head>
    <script type="text/javascript>
        var cboPanesID = <%= cboPanes.ClientID %>;
    </script>

    <!-- this JS import references cboPanesID variable declared above -->
    <script src="jquery.plugin.js"></script>
</head>
Eric Schoonover
  • 47,184
  • 49
  • 157
  • 202
2

Use a marker class on the control, and select that via jQuery.

FlySwat
  • 172,459
  • 74
  • 246
  • 311
  • While this works, if you're a stickler for proper semantics (using classes as classes and not identifiers), it's not ideal. Also, selection by class name is MUCH slower than selection by ID. – John Sheehan Oct 03 '08 at 03:40
2

Other than being a bit more expensive, performance-wise, I can't see anything wrong with using that selector. After all; you are getting the controls you want to access.

cllpse
  • 21,396
  • 37
  • 131
  • 170