a4j:jsFunction component is very similar to a4j:commandButton, but allows to perform an Ajax request from a Javascript code directly. The component sends a request using a standard JSF approach, so the JSF form is required. The following example shows how the part of a page is re-rendered when a user hovers over the names.

jsFunction Demo

Kate	John	Alex
Name:

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      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>
        <rich:spacer height="10" />
        <tr>
            <td colspan="3">Name: <b><h:outputText id="showname" value="#{userBean.name}" /></b></td>
        </tr>
        </tbody>
    </table>

    <a4j:form>
        <a4j:jsFunction name="updateName" reRender="showname">
            <a4j:actionparam name="param1" assignTo="#{userBean.name}"  />                  
        </a4j:jsFunction>
    </a4j:form>

    <br />
</ui:composition>

<<Hide Source

name attribute defines the name of the function that will be generated. You can use it as a regular Javascript function name to invoke. a4j:actionparam is used to pass the function arguments (you can use f:param as well). The order and the number of parameters corresponds to the arguments of the called function. The value(s) of the a4j:actionparam will be replaced with the value of function arguments before the Ajax request is sent. To read more about a4j:action param visit 'Ajax Paramemeter' section .

As for any other Ajax components, you can use reRender attribute to update the area(s) of a page after an Ajax Response comes back. Also, you can use data attribute and oncomplete attribute to take the data from the server and use them for Javascript to call them. For additional information about Javascript oriented and other important attributes of a4j:jsFunction read 'Ajax Attribute' section .