Highlight selection using Richfaces jQuery

Question

I am trying to highlight a selection in rich: dataGrid. For example, when I click the link in the dataGrid, the modal panel will open for the user to select the image, and when the modal panel is closed, the new selected image will be updated in the dataGrid. To do this, I override the dataGrid from modalPanel. It works great. Now I want to highlight the user's choice. When I use below rich: jquery, it becomes highlighted, but then the modalPanel and rerendering popup appears. Thus, the highlighted line jumps to the original self.

JSF:

<rich:dataGrid value="#{startupBean.choiceKeys}" var="mapEntry" columns="#{startupBean.rowSize}" styleClass="rich-table"> <rich:dataGrid id="choiceSub" styleClass="rich-table" value="#{mapEntry.value}" var="ObjBO" columns="2"> <f:facet name="header"> <h:outputText value="Choice:#{mapEntry.key}"></h:outputText> </f:facet> <h:panelGrid columns="2" border="0" styleClass="className"> <rich:panel> <f:facet name="header"> <a4j:commandLink id="objs" action="#{startupBean.getCategory}" reRender="materialTree" oncomplete="Richfaces.showModalPanel('selectMaterial',{top:'100px', left:'400px', height:'450px', width:'450px'});" > <h:outputText value="#{ObjBO.displayName}" binding="#{startupBean.outTxt}"/> <f:setPropertyActionListener target="#{startupBean.key}" value="#{mapEntry.key}" /> </a4j:commandLink> </f:facet> <h:graphicImage width="50" height="50" id="choice" alt="jsf-sun" url="#{ObjBO.color_url}" value="#{ObjBO.color_url}"> </h:graphicImage> </rich:panel> </h:panelGrid> </rich:dataGrid> <rich:jQuery selector="#choiceSub tr" query="click(function(){jQuery(this).addClass('active-row')})"/> </rich:dataGrid> 

CSS

 .active-row { background-color: red; } 

Is there any other way to do this? Please let me know.

PS: I am using JSF2.0, Richfaces 3.2, Apache Tomcat 7, Java 1.7.

Thanks Jane

Answer 1

When an item is retransmitted, it is replaced with the new content created by the server. That is, any additional formatting or changes that were previously applied dynamically (since jQuery in rich: jQuery) is lost. See also the problem description in rich: jQuery manual http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_jQuery.html .

Basically, you should apply string highlighting again after ajax returns. Please comment if you need additional instructions for this.