RichFaces JavaScript interactions: invoking JavaScript before and after Ajax request

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s