JSF 2.2 AJAX Example

Using AJAX with JSF 2.2 is very easy, we have just to use the f:ajax tag which allows : reading from fields, setting bean properties and updating JSF UI components.

In this example, we will use AJAX request to send some input values instead of submitting the whole form.

 

1. Technologies used

  • JSF 2.2.8
  • Maven 3.0.5
  • Eclipse 4.2
  • JDK 1.6
  • Tomcat 7.0

 

2. Project structure

JSF-2.2-AJAX-Example-1

 

3. JSF 2.2 dependencies

File : pom.xml

 

4. ManagedBean

File : Student

 

5. JSF Page

File : index.xhtml

f:ajax tag defines two attributes :
- execute : to specify the client Ids to send to server to process, in our case, title and name fields.
- render : to specify the client Ids of components to update after server response.

So, when the button is pressed, the following actions will be performed :
– send the values of title and name fields to server.
– set message property in the Student bean.
– send back the message value to the client.
– update the outputText component with the value of the message property.

 

5. Test

URL : http://localhost:8080/JSF2.2-AJAX-Example/

JSF-2.2-AJAX-Example-2

We tape some values and press the button.

JSF-2.2-AJAX-Example-3

 

Download source code

 

Related Posts