Max Katz

One of the unique features in RichFaces is its power and flexibility. If you don’t want or need to deal with JavaScript then you use controls such a4j:support, a4j:commandButton, a4j:commandLink, a4j:poll, and a4j:jsFunction to fire and Ajax request and perform partial page updates. On the other hand, if you need more flexibility or looking for more fine-grained control over what happens before and after an Ajax request, RichFaces offers such feature. The feature is usually referred to as JavaScript interactions and allows you to tap into the Ajax request before and after the request.

There are three places where you can add or inject any custom JavaScript function:

Event	Description
onsubmit, onclick	On submit (just before request is fired)
onbeforedomupdate	Response received, but before DOM update
oncomplete	After DOM update

For following example has all three events defined (onsubmit, onbeforedomupdate, oncomplete):

First you will see the message “Are you sure you want to change the country”?. You will then see “Just before DOM update”. At this point the response has come back but the DOM hasn’t been updated. Lastly, after the DOM has been updated you will see “We told you so”.

When using a4j:commandButton or a4j:commandLink, onclick attribute is used instead of onsubmit:

Complete summary of all tags and which attributes are supported:

Tag	Attribute Descriptoin
a4j:commandButton, a4j:commandButton	onclick: JavaScript code to be invoked before Ajax request is sent.
a4j:support, a4j:poll	onsubmit: JavaScript code to be invoked before Ajax request is sent.
a4j:commandButton, a4j:commandLink, a4j:support, a4j:poll, a4j:jsFunction	onbeforedomupdate: JavaScript code to be invoked after response is received but before browser DOM update oncomplete: JavaScript code to be invoked after browser DOM update

This is a very powerful feature and allows you to invoke any JavaScript at three points during an Ajax request. Also, these are client-side events which means they are processed in the browser.