JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy

JSF 2 Ajax JavaScript Library Example

April 3, 2014 by Amr Mohammed Leave a Comment

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

[code lang=”xml”]
<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>
[/code]

2. Managed Bean

IndexBean.java

[code lang=”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);
}
}
[/code]

3. The Deployment Descriptor

web.xml

[code lang=”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>
[/code]

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.

JSF 2 Ajax JavaScript Library Example 1

JSF 2 Ajax JavaScript Library Example 2

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

[wpdm_file id=34]

Filed Under: JSF Tagged With: JSF 2

About Amr Mohammed

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved