How to add JS effects on rendering AJAX parts in JSF2?

Question

In JSF2, I can update part of view by AJAX. I assume part of components tree is just generated/updated on server, rendered to HTML and this HTML is sent to client. Then inserted into DOM where appropriate.

This works, but I wonder if I could add some jQuery (or other JS) effect when I want this new HTML part to appear? What if I want it e.g. to fade in? Can I do this? How?

Answer 1

It's easy if you use Primefaces:

http://www.primefaces.org/showcase/ui/effects.jsf

Otherwise you could use the onevent attribute of the f:ajax tag, which accepts a Javascript function name as the value. This function will be called three times during an AJAX request: with begin, complete and success set in the function parameter's status field.

Check page 355 of "Java Server Faces 2.0 - The Complete Reference" for further info.

You can see a working example here:

http://www.ibm.com/developerworks/java/library/j-jsf2fu3/index.html

UPDATE: From the Primefaces users guide:

Effects can also be applied to any JSF component when page is loaded for the first time or after an ajax request is completed. Following example animates messages with pulsate effect after ajax request.

<p:messages id="messages"> 
    <p:effect type="pulsate" event="load"> 
        <f:param name="mode" value="'show'" /> 
    </p:effect>
</p:messages> 
<p:commandButton value="Save" actionListener="#{bean.action}" update="messages"/>