Using RichFaces jquery to add another class to a tab

Question

Hello! I have a rich:tabPanel with several tabs in it. I want to use jquery to record changes on each tab so that when a change is made within a tab I change the background image of the tab.

It looks like this:

<h:form id="form">
    <rich:jQuery selector="#tab1_lbl" query="addClass('testClass')" timing="onload"/>
        <rich:tabPanel switchType="client" id="tabContainer">
            <rich:tab id="tab1" label="tab1" title="tab1" >
                 tab1
            </rich:tab>

            <rich:tab id="tab2" label="tab2">
                 tab2
            </rich:tab>
       </rich:tabPanel>
</h:form>

The reason I have the selector say #tab_lbl is because the html generated from this looks like this:

<td id="form:tab1_lbl" class="dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-act rich-tab-active " title="tab1" onmouseout="RichFaces.outTab(this);" onmouseover="RichFaces.overTab(this);">
tab1
</td>

Now I also tried to specify the selector like this selector="#form:tab_lbl" , but still I can never get to add the class to this td element. Is there any reason for this? If I make a new table without using richfaces tabPanel I can easily use this way of adding classes with the same selectors, but it just dont work in this example.

Any ideas?

Edit: I would like to add that if I use firebug and add the class by hand I get the result Im looking for.

Answer 1

rich:jQuery will find the proper ID for you if it can match it to a component. From the Richfaces Developer Guide:

When you define a selector, RichFaces examines its content and tries to replace the defined in the selector id with a component id if it's found.

Also look at the example given for when you want to specify the exact ID:

<rich:jQuery selector="#form\\:menu img" query="..." />

(note the double back-slash to escape the colon)

You could use #tab1 as the selector and rich:jQuery would replace it with the correct ID. However this would find the tab and you want the tab label.

So possibly a more robust way to find the label (robust in that if you move your page around or give the form an id then it will still work) would be to find the tab and then the child of that tab that is the label. So a possible selector would be:

#tab1/../td.rich-tab-header