• 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 Form with AJAX Example

April 2, 2014 //  by Amr Mohammed//  Leave a Comment

Asynchronous JavaScript XML (Ajax) is considered for a long time as a luxury, either users or developers, but today Ajax is essential for building compelling and competitive applications. JSF2.0 has built-in Ajax support, with a standard JavaScript library.

JSF Ajax requests partially process components on the server, and partially render components on the client when the request returns. Using of Ajax has multiple forms, this post will cover Ajaxifying of a group of components or for the whole form.

You’ve noted using of f:ajax for inputText and different types of actions sources (CommandLink & CommandButton), but at these uses the f:ajax tag is associated with the component that would been ajaxifying. Such that uses is a little bit tedious cause you have to associate the f:ajax every time you want to ajaxify a certain component. This problem get solved by using the Ajax Group Concept.

Ajax Group isn’t a specific component or tag, you have to use, it’s just the same f:ajax tag, in which instead of associate the ajax tag with a specific component, you are associating it with the form. By using the Ajax Group, jsf applies the default Ajax events – Action for Action Sources and ValueChange for all of the input and select component – if you don’t specify an event. In case you’ve specified the event the Ajax is only applicable for that specified event.

Also Read:

  • JSF 2 Tutorials
  • JSF Tutorials
  • Introduction to JSF

1. The View

index.xhtml

<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>
	<h:outputScript library="javax.faces" name="jsf.js" target="head" />
</h:head>
<h:body>
	<f:view>
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 Ajax Group Example</h2>
		<f:ajax render="output">
		<h:form>
			<h3>This Ajax is Default Triggered</h3>
			<h:inputText id="input" value="#{indexBean.message}"
				valueChangeListener="#{indexBean.valueChange}"/>
			#{' '}
			<h:commandButton value="Display" action="#{indexBean.displayText}">
			</h:commandButton>
			#{' '}
			<h:commandLink value="Display" action="#{indexBean.displayText}">
			</h:commandLink>
			#{' '}
			<h:outputText id="output" value="#{indexBean.message}"></h:outputText>
		</h:form>
		</f:ajax>
	</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;
	}
	// This action will be invoked every time the commandButton has been activated
	public String displayText(){
		return "";
	}
	// This listener will be invoked every time the inputText value has changed
	public void valueChange(ValueChangeEvent e){
		System.out.println("The Value Changed For : "+e.getComponent()+" Component");
	}
}

3. The Deployment Descriptor (web.xml)

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. The View

The below snapshot shows you the full-fledged demonstration of how could be using the Ajax Group for activated the default events.

JSF 2 Ajax Group Example

The previous demonstration needs to pay attention for the following points for a good understanding of what happened now:

  • Using of f:ajax before the form, will Ajaxify the whole form.
  • Ajaxyfing the form does mean that every input (Text input, text areas, secret input, all of the select components) will be ajaxyfied by its default event.
  • The default event for the listed input components is valueChange; by that once you’ve changed the value of the input and you’ve tried to focus on any other component in the view, the change event will be triggered and the ajax request has been initiated.
  • The default event for the action sources (commandButton & commandLink) is the action (click – activate); so once the action has been activated (clicked) the ajax even click (submit) has been triggered and the ajax request has been initiated.
  • Triggering of Ajax events doesn’t mean anymore that the jsf will render any components when the Ajax call returns because you didn’t specify a render for the used f:ajax. If you’ve noted the index.xhtml, you will find that the f:ajax tag has defined a render attribute.
[wpdm_file id=30]

Category: JSFTag: JSF 2

About Amr Mohammed

Previous Post: « JSF 2 CommandLink and CommandButton with AJAX Example
Next Post: JSF 2 Ajax Progress Bar 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

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

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