⁠4.4. Events and JavaScript interactions

JSF provides global jsf.ajax.onError and jsf.ajax.onEvent events to define handlers (the jsf.ajax.onEvent event is used for all begin, success, and complete events). RichFaces adds event-specific attributes at the component level.

⁠4.4.1. onbeforesubmit

The onbeforesubmit event attribute invokes the event listener before an Ajax request is sent. The request is canceled if the event listener defined for the onbeforesubmit event returns false.

⁠4.4.2. onbegin

The onbegin event attribute invokes the event listener after an Ajax request is sent.

⁠4.4.3. onbeforedomupdate

The onbeforedomupdate event attribute invokes the event listener after an Ajax response has been returned but before the DOM tree of the browser is updated.

⁠4.4.4. oncomplete

The oncomplete event attribute invokes the event listener after an Ajax response has been returned and the DOM tree of the browser has been updated.

⁠4.4.4.1. data

The data attribute allows additional data to be handled with the oncomplete event. Use JSF Expression Language (EL) to reference the property of the managed bean, and its value will be serialized in JavaScript Object Notation (JSON) and returned to the client side. The property can then be referenced through the event.data variable in the event attribute definitions. Both primitive types and complex types such as arrays and collections can be serialized and used with data.
⁠

Example 4.3. Data reference example

​<a4j:commandButton value="Update" oncomplete="showTheName(event.data.name)" data="#{userBean.name}" />

⁠4.4.5. onerror

The onerror event attribute invokes the event listener when an error has occurred during Ajax communications.

⁠4.4.6. Registering event callbacks with jQuery

RichFaces allows one to register callbacks for the events listed above using jQuery:
  • ajaxsubmit: triggered before an Ajax request is sent.
  • ajaxbegin: triggered after an Ajax request is sent.
  • ajaxbeforedomupdate: triggered after an Ajax response has been returned but before the DOM tree of the browser has been updated.
  • ajaxcomplete: triggered after an Ajax response has been returned and the DOM tree of the browser has been updated.
The event callback can be registered either on a form or a whole page: 
​<h:outputScript>
​jQuery(document).ready(function() {
​	jQuery(#{rich:element('form_id')}).on("ajaxsubmit", function() {
​	    // the callback will be triggered before the form is submitted using JSF AJAX
​    	console.log("ajaxsubmit");
​	});
​	
​	
​    jQuery(document).on("ajaxcomplete", function() {
​        // the callback will be triggered for each completed JSF AJAX for the current page
​    	console.log("ajaxcomplete");
​	});
​}
​</h:outputScript>