JSF2 Advanced Topics - JSF and HTML5 - page 271

onevent="function(data) { processInput(data, 'my-message:busy'); }"
render="output-message" execute="@this" />
</h:inputText>

<h:graphicImage id="busy" library="images" name="spinner.gif" style="display: none; float: left;" />

<h:panelGroup id="output-message">#{ajaxDemo.outputMessage}</h:panelGroup>

</h:form>

<script type="text/javascript">
// Handle for onevent
function processInput(data, id) {
if (data.status === 'begin') {
toggle_visibility(id);
} else if (data.status === 'success') {
toggle_visibility(id);
}
}
// Utility function for toggling the visibility of an element
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>

You will notice that we have used a special value in execute attribute. Both the execute and render attributes support
a couple of special values. The special values are for convenience so that you do not have to enter specific component
identifiers for components that are normally affected by the Ajax behavior. These values are outlined in Table 11-2 .

Table 11-2. Execute/Render Special Values

Keyword Description

@all Execute or render all components

@none

Do not execute or render any components

@this Execute or render the component that triggered the Ajax behavior

@form Execute or render all the components in the form of the component that

triggered the Ajax behavior

Using the JavaScript API
JSF comes with a JavaScript API that can be used together or instead of the <f:ajax> tag. The JavaScript API is
available on all pages under the namespace jsf. Like <f:ajax> , the JavaScript API can be used to initiate Ajax requests.
The JavaScript API can also be used for monitoring Ajax requests and handling errors.