JSF2 Advanced Topics - JSF and HTML5 - page 274

the specific task you are trying to solve. It may make more sense to use the JavaScript API if other aspects of the page
are controlled at the same time, collecting all the functionality in logically grouped JavaScript functions. If the page
does not have any other JavaScripts being executed it may be overkill to use the JavaScript API and instead stick to the
<f:ajax> tag.

Listing 11-8. Same Example as Listing 11-x but Using the <f:ajax> Tag Instead of the JavaScript API

<h:form id="my-name-form-pure-jsf">
<h:outputLink>
<f:ajax render="my-name-display-pure-jsf" execute="my-name-pure-jsf" />
Save name
</h:outputLink>
<h:inputText id="my-name-pure-jsf" value="#{javaScriptApiDemo.myName}" />
<h:panelGroup id="my-name-display-pure-jsf">
Your name is: #{javaScriptApiDemo.myName}
</h:panelGroup>
</h:form>

Monitoring Ajax Events
One thing that is not possible using the <f:ajax> tag is to monitor all the Ajax requests being executed on the client
as well as general error handling of possible issues occurring from the requests. The JavaScript API offers two event
listeners. One is an event listener for Ajax request events ( addOnEvent ) and another is for server error notification
( addOnError ). The Ajax request event listener emits three kinds of events outlined in Table 11-4 . The server error event
listener emits four kinds of events outlined in Table 11-5 .

Table 11-4. Events Emitted from the Ajax Request Event Listener

Event Description

begin

Emitted whenever an Ajax request begins

complete Emitted whenever an Ajax request completes

success E mitted whenever an Ajax request finishes successfully

Table 11-5. Events Emitted from the Server Error Event Listener

Event Description

httpError Emitted if the HTTP status is not in the 2xx Success range

serverError Emitted when an error or exception occurred on the server side

malformedXML Emitted when incorrect XML response is returned from the server

emptyResponse E mitted when no response is returned from the server

Listing 11-9 is an example of a JavaScript that hooks into the two event handlers. The JavaScript can be used by
any Facelets page by using the <h:outputScript/> tag as demonstrated in Listing 11-10.