jQuery cluetip: Manipulate content after rendering

Question

Hi, I may be stating this incorrectly, but is there any way to manipulate (using JavaScript) the content in an cluetip once the content has been (dynamically) loaded to the external .jsp?

I have a list of items being displayed, and I want to bold some of them. I cannot add ID's or classes individually to any of these items in the list, prior to rendering. It's basically a data dump

FYI, we're using JSF to pull the items on the .jsp, which are rendered in HTML as a table:

<h:panelGrid columns="1">
    <h:column>
        <h:selectManyCheckbox layout="pageDirection" value="#{advancedtoolscontroller.roleItems}">
            <f:selectItems value="#{advancedtoolscontroller.roleList}" />
        </h:selectManyCheckbox>
    </h:column>
</h:panelGrid>  

Any help is greatly appreciated...

Answer 1

You need to assign the h:selectManyCheckbox and any parent UINamingContainer components (e.g. h:form, h:dataTable, etc) an unique ID. This way JSF will generate the client ID's accordingly, otherwise it will autogenerate unpredictable client ID's which you cannot use in JS. To find out how they have been generated, just rightclick the page in webbrowser and choose View Source.

There's however one small caveat, JSF uses the colon : as UINamingContainer separator, e.g. formid:checkboxid. The colon is an illegal character in CSS. To select them in CSS/jQuery anyway, you need to escape them with a backslash. E.g. formid\:checkboxid.

Besides, the h:dataTable will append one more identifier to the client ID after the datatable ID, namely the row index, e.g. formid:datatableid:0:checkboxid. But that should look obvious enough when you see the patterns in the generated HTML output.

The h:selectManyCheckbox on its turn assigns every checkbox an unique client ID and the same client name. Again, just check the generated HTML output to see the patterns.

In jQuery you could also use the jQuery.filter() to filter out checkboxes of interest based on the last part of their client ID/name.