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?
$("#<%= 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.
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.
@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.
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>
I just blogged about this two days ago. I covered all the known ways and came up with one of my own (custom jQuery selector).