The a4j:jsFunction component creates a JavaScript function that allows you to send JSF Ajax requests from any JavaScript. You define the Ajax and JSF properties just like a4j:ajax, or a4j:commandButton, and a4j:jsFunction creates the JavaScript for you. The component sends a request using the standard JSF mechanisms. Note that this means a JSF form is required.
The following example shows how to use a4j:jsFunction to create a function named updateName. This is then called on mouseover of the different names. This triggers the full round trip Ajax request and renders the updated name.
<!DOCTYPE html> <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> <table width="400"> <tbody> <tr> <td><span onmouseover="updateName('Kate')" onmouseout="updateName('')">Kate</span></td> <td><span onmouseover="updateName('John')" onmouseout="updateName('')">John</span></td> <td><span onmouseover="updateName('Alex')" onmouseout="updateName('')">Alex</span></td> </tr> <tr> <td colspan="3">Name: <b> <h:outputText id="showname" value="#{functionBean.text}" /> </b></td> </tr> </tbody> </table> <h:form id="form"> <a4j:jsFunction name="updateName" render="showname"> <a4j:param name="name" assignTo="#{functionBean.text}" /> </a4j:jsFunction> </h:form> </ui:composition>
