JSF2 Advanced Topics - JSF and HTML5 - page 272

The method signature for initiating an Ajax request using the JavaScript API is shown in Listing 11-5, and
Table 11-3 explains the input parameters of the method.

Listing 11-5. Method Signature for Initiating an Ajax Request Using JavaScript

jsf.ajax.request(source, event, {options});

Table 11-3. Input Parameters to jsf.ajax.request

Parameter Type Necessity Description

source

DOM Element
object or String

Mandatory The DOM Element that triggered the Ajax request. The

unique identifier of the DOM Element is also sufficient.

event DOM Event object Mandatory The DOM Event that invoked the Ajax request.

options Associative array Optional Associative array of name/pair options specifying which

components should be executed and rendered as well
as callback functions for the Ajax event lifecycle. Valid
options include execute and render, used for specifying a
delimited list of client identifiers that should be executed
and/or rendered upon the request. Two callback
functions can be specified: onevent and onerror, used to
handle the event lifecycle and errors, respectively. Lastly,
it is possible to specify additional parameters using the
params option.

Listing 11-6 shows an example of a button that executes a script that updates a panel grid using the JavaScript API.

Listing 11-6. Updating a Panel Grid Using the JavaScript API
<h:panelGroup id="clicks" layout="block">
<h:outputLink id="refresh" onclick="refreshClicks(this, event); return false;" >
Refresh:
</h:outputLink>
<h:outputText value="#{javaScriptApiDemo.clicks}" />
</h:panelGroup>

<script type="text/javascript">
function refreshClicks(source, event) {
jsf.ajax.request(source, event, {render: 'clicks'});
}
</script>

In Listing 11-6 we see that the JavaScript refreshClicks function is being called in the onclick event of the
refresh output link. It is passing itself as the source and the event that was generated by onclick to the refresh
function. It ends by returning false so that clicking the link does not invoke a full HTTP request. All the magic happens
in the refreshClicks function. Here an Ajax request is triggered using the source and event passed to the function.
The Ajax request has a single option that states that upon returning from the Ajax request the element with the ID
clicks should be rendered. The element with ID clicks is a panel group containing the link and a value retrieved
from a managed bean with the name javaScriptApiDemo . If the value of clicks has increased in the managed bean the
refreshClicks function will update the display and show the current number of clicks.