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:

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:

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.