rich:effect usage problem

Question

I would like to use a rich:effect with a JSF element in my app but am having a little trouble with the AJAX side of things.

As per the below, I have an h:outputText element which has a JSF referenced value (#{MyBacking.sysMsg}) which changes during the user experience with the app. As the rich:effect element uses javascript events, specifying the code below doesn't work.

I've tried using a4j:support to ajaxify the h:outputText element but this is seemingly ignored too. No buttons will be clicked by the user - the sysMsg variable is updated elsewhere and I want to highlight a change to the audience.

The code is as follows:

<h:outputText value="#{MyBacking.sysMsg}" id="sysMsg" style="#{MyBacking.colour}" />
<rich:effect event="onchange" type="Highlight" params="duration:0.8" />
<rich:effect event="onchange" for="sysMsg" type="Appear" params="delay:3.0,duration:0.5" />

I think there's bound to be a simple answer for this, but I cannot seem to find the answer in my head or on the net. Can anyone help me?

Answer 1

To update the text based on serverside changes you will have to use <a4j:poll> or <a4j:push>.

E.g.:

<rich:effect name="highlight" for="sysMsg" type="Highlight" params="duration:0.8" />

<h:form>
<a4j:poll id="poll" interval="1000" reRender="sysMsg" oncomplete="highlight();"/>
</h:form>

This of course will highlight every second and not only when the value has changed. To highlight only on change you are probably better of to use a custom javascript/jquery function, remember the value und call highlight when it changed.

Here is a possible solution:

<h:form id="form">
<a4j:region renderRegionOnly="true">
    <h:outputText value="#{MyBacking.sysMsg}" id="sysMsg" style="#{MyBacking.colour}" />
    <a4j:poll id="poll" interval="1000" reRender="sysMsg" oncomplete="checkChange();" limitToList="true"/>
</a4j:region>

<rich:effect name="highlight" for="sysMsg" type="Highlight" params="duration:0.8" />

</h:form>

<script>
var value = $('form:sysMsg').textContent ;
function checkChange(){
    if($('form:sysMsg').textContent  != value){
        highlight();
    }
}
</script>

Here are samples: Exadel Demo and the documentation: rich:effect a4j:poll