• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • 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)
  • 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)

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]

Category: JSFTag: JSF 2

About Amr Mohammed

Previous Post: « JSF 2 Ajax Error Handling Example
Next Post: JSF 2 Managed Beans Example »

Reader Interactions

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.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

np.zeros

A Complete Guide To NumPy Functions in Python For Beginners

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact