DOM Navigation with JQuery in ASP.Net

Question

I've written the JQuery below, and have had to search for items in the DOM using multiple calls to .parent() because the ClientIDs rendered in ASP.Net are built up dynamically in the html. I'm aware that this will cause problems each time we change the markup code, and would like to see if anyone knows of a better way to do this in ASP.Net.

<script language="jquery" src="js/jquery-1.3.2-vsdoc2.js" type="text/javascript">
</script>
<script src="js/jquery.color.js" type="text/javascript">
</script>
script language="javascript" type="text/javascript">
    $(document).ready(function() {

    //Get the cost of the base item, then add the cost of the selected compoents as 
    //they get selected.    
    $(".AspNet-CheckBoxList > ul > li > input").click(function() {

        var itemCost = 0;

        $(this).find("fieldset:div:span");

        itemCost =  GetItemCost($(this).parent().parent().parent().parent()
        .parent().parent().parent().children().find("span").text());
        var Component = $(this).next("label").text();

        if ($(this).attr("checked") == true) {
            itemCost = (itemCost + GetItemCost(Component)).toFixed(2);               
        }
        else {
            itemCost = (itemCost - GetItemCost(Component)).toFixed(2);
        }

        $(this).parent().parent().parent().parent().parent()
        .parent().parent().children().find("span").text("$" + itemCost);
        $(this).parent().parent().parent().parent().parent()
        .parent().parent().children().find("span").animate( 
        { backgroundColor: "#FFFF66" }, 300)
         .animate({ backgroundColor: 'white' }, 750);
      });

   });

function GetItemCost(text) {
    var start = 0;
    start = text.lastIndexOf("$");

    var itemCost = text.substring(start + 1);       

    var pattern = /,/g;
    itemCost = itemCost.replace(pattern, "");       

    return Number(itemCost);
}
</script>

Here is some of the html copied from the source of the rendered page

<fieldset id="ctl00_ContentPlaceHolder1_ctl00_FieldSet" class="parent">
<legend>
</legend>
<a id="ctl00_ContentPlaceHolder1_ctl00_ImgLink" class="imgcontainer">
</a>
<div>
<input id="ctl00_ContentPlaceHolder1_ctl00_RemoveCartItem" type="image" 
    alt="Remove Item" src="img/buttons/remove_4c.gif" 
    name="ctl00$ContentPlaceHolder1$ctl00$RemoveCartItem"/>
<span id="ctl00_ContentPlaceHolder1_ctl00_TotalItemCost">$315.96</span>
</div>
<ol id="ctl00_ContentPlaceHolder1_ctl00_InputList">
<li class="pt">
<label id="ctl00_ContentPlaceHolder1_ctl00_ProjectLabel"   
for="ctl00_ContentPlaceHolder1_ctl00_ProjectValue">Project</label>
<input id="ctl00_ContentPlaceHolder1_ctl00_ProjectValue" type="text"  
name="ctl00$ContentPlaceHolder1$ctl00$ProjectValue"/>
</li>
<li class="pt">
<label id="ctl00_ContentPlaceHolder1_ctl00_TaskLabel"    
for="ctl00_ContentPlaceHolder1_ctl00_TaskValue">Task</label>
<input id="ctl00_ContentPlaceHolder1_ctl00_TaskValue" type="text"  
name="ctl00$ContentPlaceHolder1$ctl00$TaskValue"/>
</li>
<li id="ctl00_ContentPlaceHolder1_ctl00_ComponentsLI">
<span>Specify</span>
<fieldset id="ctl00_ContentPlaceHolder1_ctl00_ComponentsFieldSet"  
class="fieldsetlist">
<legend>Software Components</legend>
<div id="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList" class="AspNet- 
CheckBoxList">
<ul class="AspNet-CheckBoxList-RepeatDirection-Vertical">
<li class="AspNet-CheckBoxList-Item">
<input id="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_0"  
type="checkbox" value="2305"     
name="ctl00$ContentPlaceHolder1$ctl00$SoftwareComponentsCheckList$0"/>
<label for="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_0">Another  
Cool Component $1,000.00</label>
</li>
<li class="AspNet-CheckBoxList-Item">
<input id="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_1"  
type="checkbox" value="2306"   
name="ctl00$ContentPlaceHolder1$ctl00$SoftwareComponentsCheckList$1"/>
<label for="ctl00_ContentPlaceHolder1_ctl00_SoftwareComponentsCheckList_1">Software   
Assurance $274.89</label>
</li>
</ul>
</div>
</fieldset>
</li>
</ol>
</fieldset>

Answer 1

This might help you: To get the ID of an ASP .NET control in JavaScript, use sever tags like this right in your JavaScript code:

$("#<%=lblMyAspNetLabel.ClientID %>").text("test");

Where lblMyAspNetLabel is the ID of an asp:Label control on your aspx page.

Answer 2

You can use the attribute ends with selector:

$("tag[id$='ServerSideId']")

Where ServerSideId is the id used on server side.

For example to select:

<li id="ctl00_ContentPlaceHolder1_ctl00_ComponentsLI">

Use:

$("li[id$='ComponentsLI']")

Answer 3

I know that ASP.NET makes it difficult to know what the ID of a given tag will be, but it usually is possible to add a CSS class to any given control. Perhaps you could use a unique class for the controls you want to find with jQuery and then use $(".yourCssClass") to get the DOM nodes.

Answer 4

My sugguestion is to use css class as identifier for the controls you want jQuery to select. e.g.

<a id="ctl00_ContentPlaceHolder1_ctl00_ImgLink" class="imgcontainer">
</a>

will become

<a id="ctl00_ContentPlaceHolder1_ctl00_ImgLink" class="imgcontainer ImgLink">
</a>

Then use $(".ImgLink") to select the hyperlink

Answer 5

I wrote a custom selector for jQuery for ASP.Net UniqueID's:

//case-insensitive selector for ASP.Net ID's
//usage: $(':aspnetid(id)')

jQuery.extend(
    jQuery.expr[":"],
    {
     aspnetid: function(a, i, m) {
      return (new RegExp(m[3] + '$', 'i')).test(jQuery(a).attr('id'));
     }
    }
);