JSF 2 + Ajax Integration Example with f:ajax Tag

By Arvind Rai, January 22, 2015

This page will provide the JSF 2 and Ajax integration example with f:ajax tag. To use this tag we need to do nesting with h:inputText and h:commandButton etc. There are different attributes in f:ajax tag which is used to define Ajax execution. Some of the attributes are event, execute and render etc. Here in this page we are providing demo for f:ajax with h:inputText and h:commandButton.

f:ajax with h:inputText

To use f:ajax with h:inputText, we write it inside h:inputText. Find the code snippet.

<h:inputText id="msgId" value="#{userBean.message}">
    <f:ajax event="valueChange" execute="msgId" render="outputId" />
</h:inputText>

As the event is valueChange , so when value is changed in text field, Ajax executes for input field with id msgId and output is rendered to output field with id outputId

f:ajax with h:commandButton

To use f:ajax with h:commandButton, we write it inside h:commandButton. Find the code snippet.

<h:commandButton value="Display" type="button">
  <f:ajax event="click" execute="msgId" render="outputId" />
</h:commandButton>

As the event is click , so when button is clicked, Ajax executes for input field with id msgId and output is rendered to output field with id outputId

f:ajax Tag Attributes

There are different attributes for f:ajax tag in JSF 2. Some of them are listed below.

event: Defines the event when Ajax will run.
execute: Defines the id for which input data, Ajax will run.
render: Defines the id where the output of Ajax is displayed.

Complete Example

Now find the complete example for JSF 2 and Ajax integration. We are creating two UI, one for f:ajax with h:inputText demo and second for f:ajax with h:commandButton demo.

Project Structure in Eclipse

Find the demo project structure in eclipse.

JSF 2 + Ajax Integration Example with f:ajax Tag

Ui for f:ajax with h:inputText

Find the XHTML.
input.xhtml

<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>JSF 2 Ajax Integration</title>
    </h:head>
    <h:body>
       <h3>JSF 2 Ajax Integration</h3>
        <h:form id="userForm">
			<h:outputText id="outputId" value="#{userBean.userMessage}" /><br/><br/>
			<h:inputText id="msgId" value="#{userBean.message}">
			    <f:ajax event="valueChange" execute="msgId" render="outputId" />
			</h:inputText>
        </h:form>
    </h:body>
</html>

Ui for f:ajax with h:commandButton

Find the XHTML.
user.xhtml

<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>JSF 2 Ajax Integration</title>
    </h:head>
    <h:body>
       <h3>JSF 2 Ajax Integration</h3>
        <h:form id="userForm">
			<h:outputText id="outputId" value="#{userBean.userMessage}" /><br/><br/>
			<h:inputText id="msgId" value="#{userBean.message}"/>
			<h:commandButton value="Display" type="button">
         		  <f:ajax event="click" execute="msgId" render="outputId" />
                        </h:commandButton>
	</h:form>
    </h:body></html>

Managed Bean

Find the managed bean being used in demo.
UserBean.java

package com.concretepage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean(name = "userBean", eager = true)
@RequestScoped
public class UserBean {
	private String message;
	public String getUserMessage(){
		if (message == null) {
			return "Enter Your Message.";
		}
		return "You have Entered:"+message;
	}
	public String getMessage() {
		return message;
	}
	public void setMessage(String message) {
		this.message = message;
	}
}

Output

Access the URL http://localhost:8080/JSF2Demo-1/user.xhtml
Enter some data in text field and click on display button. We will see the output generated by Ajax for click event.

Access the URL http://localhost:8080/JSF2Demo-1/input.xhtml
Change some data in text field . We will see the output generated by Ajax for value change event.