⁠5.6. <a4j:jsFunction>

The <a4j:jsFunction> component performs Ajax requests directly from JavaScript code and retrieves server-side data. The server-side data is returned in JavaScript Object Notation (JSON) format prior to the execution of any JavaScript code defined using the oncomplete attribute.

⁠5.6.1. Basic usage

The <a4j:jsFunction> component requires the data attribute. Use the data attribute to define where the retrieved server-side data is stored.
Example 5.4, “<a4j:jsFunction> example” shows how an Ajax request can be initiated from the JavaScript and a partial page update performed. The JavaScript function can be invoked with the data returned by the Ajax response.
⁠

Example 5.4. <a4j:jsFunction> example

​<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>
​   <a4j:jsFunction name="updateName" render="showname">
​      <a4j:param name="name" assignTo="#{functionBean.text}"/>
​   </a4j:jsFunction>
​</h:form>
The output text for the name is changed depending on which table cell the user hovers over with the mouse. The <a4j:jsFunction> component manages the updating and display of the name.

⁠5.6.2. Parameters and JavaScript

The <a4j:jsFunction> component allows the use of the <a4j:param> component or the JavaServer Faces <f:param> component to pass any number of parameters for the JavaScript function.

⁠5.6.3. Reference data

  • component-type: org.richfaces.Function
  • component-class: org.richfaces.component.UIFunction
  • component-family: javax.faces.Command
  • renderer-type: org.richfaces.FunctionRenderer