JSF 2 Ajax JavaScript Library Example

As you’ve noted in the different provided examples that discusses various aspect of Ajax, and at every time you’ve been using the Ajax, you need to add an <h:outputScript library=”javax.faces” name=”jsf.js”/> tag. That script used for ajaxifying the JSF 2.0. The f:ajax tag is a convenient way to implement simple Ajax functionality, but that tag offers a limited functionality. But because that tag is built on jsf’s built-in JavaScript library, you can use that JavaScript directly to implement more complicated Ajax scenarios.

The library comes with a set of Ajax functions:

addOnError(callback): A JavaScript function that jsf invokes when an Ajax call results in an error.
addOnEvent(callback): A JavaScript function that jsf calls for Ajax events. This function will be called three times throughout the lifetime of a successful Ajax call: begin, complete and success.
isAutoExec(): Returns true if the browser executes evaluated JavaScript.
request(source, event, options): Sends Ajax request. The arguments of this function correspond to f:ajax attributes.
response(request,context): Processes the Ajax response. The response is XML.

The request() method sends an Ajax request to the server. That request is always:

A POST to the surrounding form’s action.
Asynchronous.
Queued with other Ajax requests.

Also Read:

JSF 2 Tutorials

JSF Tutorials

Introduction to JSF

1. The View

index.html

<html 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">
<h:head>
	<script>
		if(!net) var net = {}
		if(!net.javabeat){
			net.javabeat = {
				monitor:
				function (data){
					var loading = document.getElementById("image");
					if(data.status == "begin"){
						loading.style.display = "block";
					}
					else if(data.status == "success"){
						loading.style.display = "none";
					}
				},
				handle:
				function(data){
					console.log("Error Description: "+data.description);
					console.log("Error Name: "+data.errorName);
					console.log("Error errorMessage: "+data.errorMessage);
					console.log("httpError: "+data.httpError);
					console.log("emptyResponse: "+data.emptyResponse);
					console.log("maleformed: "+data.maleformed);
					console.log("serverError: "+data.serverError);
				}
			}
		}
	</script>
	<h:outputScript library="javax.faces" name="jsf.js"/>
</h:head>
<h:body>
	<f:view>
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 Error Handling Example</h2>
		<h:form prependId="false">
			<h:inputText id="input" value="#{indexBean.message}"
							valueChangeListener="#{indexBean.valueChange}"
							onblur="jsf.ajax.request(this, event,{
									execute: 'input',
									render : 'output',
									onevent: net.javabeat.monitor,
									onerror: net.javabeat.handle
								})"/>
			#{' '}
			<h:outputText id="output" value="#{indexBean.message}"></h:outputText>
			<h:graphicImage id="image" value="#{resource['images:ajax-loader.gif']}" style="display:none;"></h:graphicImage>
		</h:form>
	</f:view>
</h:body>
</html>

2. Managed Bean

IndexBean.java

package net.javabeat.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ValueChangeEvent;

@ManagedBean
@SessionScoped
public class IndexBean {
	private String message;

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public void valueChange(ValueChangeEvent e) throws Exception{
		Thread.sleep(6000);
	}
}

3. The Deployment Descriptor

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<context-param>
		<description>State saving method: 'client' or 'server'
						(=default). See JSF Specification 2.5.2
		</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

4. JSF 2 Using JavaScript Library Demo

The below snapshots will show you the proper use of jsf JavaScript Library, in that the user has entered the value inf the inputText. An ajax request has been initiated onblur.

This asynchronous request has been initiated without using of f:ajax.
The error will be handled using onerror property.

[wpdm_file id=34]

1. The View

2. Managed Bean

3. The Deployment Descriptor

4. JSF 2 Using JavaScript Library Demo

About Amr Mohammed