Change selected row's background color in JSF using jQuery/JavaScript

Question

I have a datatable which has a column with a value of commandlink. I want to change the background color of that row, when the user click the commandlink. Any idea?

<o:column id="name" width="8%"
    class="result_col" sortingComparator="caseInsensitiveText">
    <f:facet name="header">
     <h:outputText value="#{message.label_name}" />
    </f:facet>
    <o:commandLink
     action="#{page.getName(name)}"
     onajaxend="openHistoryName();">
     <h:outputText style="color:#A3A7DC;" value="Click here" />
    </o:commandLink>
</o:column>

Answer 1

o:column does not support the class attribute. Use styleClass instead.

Since you are making an AJAX call on the click of a button, you have two options:

1. Pass the new CSS styleClass as a response. Ex:

   <o:column styleClass='#{someManagedBean.className}'.../>
   

So when you render your datatable/row, you get the updated style applied automatically.

2. Using JS/jQuery, you have to manually trigger the updated CSS on the 'onajaxend' method. For this you would need to understand the HTML code that is generated by openfaces. Based on selectors, you can apply the CSS changes.