06/10/2010
Unique IDs for regular HTML elements in modules.
Posted by
Matthew Quinn
The fastest way to get a handle on an object in the HTML DOM is by its ID. This also applies to jQuery's ID selector. Consequently it makes sense to put ID attributes on any elements you're planning to select.
However, IDs need to be unique in order to work as expected. This adds a bit of a challenge when writing Agility modules, which may appear multiple times on a page. In order to guarantee uniqueness of IDs (without using .NET controls, which generate these IDs automatically), you can do the following:
<!-- beginning of module -->
<div id="<%= ClientID %>">
<img id="<%= ClientID %>_Image" src="..." alt="..." />
<p id="<%= ClientID %>_Summary">Some content.<p/>
</div>
<!-- end of module -->
Since the ClientID for the control will be unique, you will also have a unique ID for each of the child elements. Additionally, you only have to pass the ClientID to a JavaScript function and you'll already know how to get all the child elements by using the same ID suffixes.
« Back to Blog
Main Page |
