Press enter to see results or esc to cancel.

JSF 2.0 + Ajax hello world example in Netbeans IDE JSF Tutorial Part 2

In this tutorial we are going to check a helloworld Java Server Faces Project with Ajax Support. In this page we are creating a button in a form. But once the button is clicked it will submit an ajax request instead of complete form,

  1. Project Structure in NetBeans
  2. You have to add core tag library xmlns:f=”” in the header as shown below to get the ajax tags in the page. Below code shows a jsf page with ajax support.

    <?xml version='1.0' encoding='UTF-8' ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns=""
        <title>Facelet Title</title>
          Enter Name : <h:inputText id="name" value="#{}"></h:inputText><br></br>
          <h:commandButton value="Submit">
            <f:ajax execute="name" render="output"></f:ajax>
          <h:outputText id="output" value="#{helloAjax.say_welcome_ajax}"></h:outputText>

    In the above page, The form will submit an Ajax Request.
    In In the tag : The execute=”name” indicate the form field with id ‘name’ will be send to server. Here it will submit the text box value.
    render=”output” : Once the form is submitted it will refresh the field with an id of ‘output’. So here it will refresh the component.

  3. web.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <web-app version="2.5" xmlns="" xmlns:xsi="" xsi:schemaLocation="">
         <servlet-name>Faces Servlet</servlet-name>
         <servlet-name>Faces Servlet</servlet-name>

    import javax.faces.bean.ManagedBean;
    import javax.faces.bean.RequestScoped;
    public class HelloAjax {
        private String name;
        public String getName() {
            return name;
        public void setName(String name) {
   = name;
        public String getSay_welcome_ajax() {
            if(name==null || name.equals("")){
                return "";
                return "Hello Ajax "+name;
        public HelloAjax() {
  5. http://localhost:8080/HelloWorldAjax/faces/index.xhtml
  6. After Submitting the form.
  7. Download the Project here.



Leave a Comment