In Relation To

This short and I think simple solution is written to answer the main question which rose after this entry and addresses how to highlight updated table cells on the client side.

The main problem here that we are using reRender for the table cells' children elements and not the cells themselves. So we can’t simply define styleClass with some EL-binding on the column to highlight the changes easily. (By the way, the feature of whole cells and even rows updating is already under design for the future 4.x version.)

We will use the data attribute of the push component to serialize a list of changes from the backing bean to the client, and the rich:jQuery component in order to highlight items which correspond to the list.

Full page code (some page parts which are fully similar to the previous post's code are cut to make it shorter):

<ui:composition> 
<style>
.highlight{
	background-color: yellow;
}
</style>
<h:form id="choicesForm">
	<rich:jQuery selector=".votesClass"
		query="each(function(key){
		if (param[key].votesCount > 0) jQuery(this).addClass('highlight'); 
		else jQuery(this).removeClass('highlight'); })"
		name="jqhighlight" />
	<rich:dataTable value="#{choicesBean.choices}" var="choice"
		rowKeyVar="row" ajaxKeys="#{choicesBean.keysSet}" id="choices">
		// All the other columns
		<rich:column id="votes" styleClass="votesClass">
			<f:facet name="header">
				<h:outputText value="Current Votes" />
			</f:facet>
			<h:outputText value="#{choice.votesCount}" id="choiceVotes" />
		</rich:column>
	</rich:dataTable>
		<a4j:push enabled="#{choicesBean.enabled}" interval="3000"
			timeout="3000" eventProducer="#{choicesBean.addListener}" id="push"
			limitToList="true" action="#{choicesBean.processUpdates}"
			reRender="choiceVotes, push, tempResults" data="#{choicesBean.lastVotes}" oncomplete="jqhighlight(null,data)"/>
	</h:form>
</ui:composition>

Let’s review the key changes in this code:

• We added highlight CSS class definition. This class will be applied to the vote's cells which were updated.

• votesClass was added to votes column. It is done in order to use it in jQuery selector. We will search for all the td elements with this class applied.

• data definition added to push component in order to serialize the changes list to the client after update occurs.

• oncomplete added to push in order to call the registered jQuery component which will handle the updates. data parameter contains the serialized changes list. The first parameter could be a DOM element which would later be added to the selector, but as we intended to use the selector by CSS class, we are passing null there.

Let’s review the key addition more closely:

<rich:jQuery selector=".votesClass"
	query="each(function(key){
	if (param[key].votesCount > 0) jQuery(this).addClass('highlight'); 
	else jQuery(this).removeClass('highlight'); })"
	name="jqhighlight" />

• name="jqhighlight" - register the code generated by jQuery component as a JavaScript function with the name specified.

• selector=".votesClass" – creates the selector for the query and the result will be all the elements which have votesClass applied.

• The code defined in query - simply iterate through the elements returned by selector and if the corresponding data element returns a not-null change, this element is given the highlight css class. If there was no change for the element, the highlight class is removed if it exists.

So now the result of push updates will look like this:

Full demo code is available at 3.3.x community branch under richfaces-demo project and can be downloaded from anonymous svn.