JSF 2.2 Basic Ajax Feature Example explained

by MemoryNotFound · Published November 26, 2014 · Updated February 14, 2015

Project Environment

Java JDK 1.7
JSF 2.2.8-02
Servlet Spec. 3.1.0
Apache Tomcat 8.0.15
Maven 3.2.3

JSF 2.2 AJAX View

We are explicitly including the JSF JavaScript library which is not necessary if you specify the <h:head><h:head> element in your page this library will automatically be included in the page. I just put it there because then I can tell JSF where to put the JavaScript File. with target=”body” I tell JSF to put the JavaScript file at the bottom so there is no blocking resource above the fold.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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>
    <h:outputScript library="javax.faces" name="jsf.js" target="body" />
</h:head>
<h:body>

    <h1>JSF 2.x basic ajax example</h1>

    <h:form>
        <h:outputLabel value="Show a message using ajax: ">
            <h:inputText id="message" value="#{messageBean.message}"/>
        </h:outputLabel>

        <h:commandButton value="Show Message">
            <f:ajax execute="message" render="output" />
        </h:commandButton>
    </h:form>

    <p><h:outputText id="output" value="#{messageBean.message}" /></p>

</h:body>
</html>

In this example we use ajax to submit the form to the server and re-render only a port of the screen. In this case only output will be re-rendered.

<h:commandButton value="Show Message">
    <f:ajax execute="message" render="output" />
</h:commandButton>

The execute attribute of the <f:ajax/> element indicates that only the elements specified here are submitted to the server. In our case only “message” will be submitted to the server for processing.

<h:outputText id="output" value="#{messageBean.message}" />

The render attribute of the <f:ajax/> element will refresh the component with an id of “output” if the ajax request is finished.

Managed Bean

We have a simple managed bean which holds a message to be displayed on the page.

package com.memorynotfound.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class MessageBean {

    private String message;

    public String getMessage() {
        return message;
    }

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

Demo

URL : http://localhost:8080/jsf-basic/

We submit a value to the server using the command button which is configured with the <f:ajax/> tag. This will send a partial form submission to the server for processing.