Using AJAX with JSF

jobs.jsp

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> 
<f:view>
    <h:form>
        <table>
            <tr>
                <td>Select Job :
                <td>
                      <h:selectOneMenu value="#{PayrollBean.jobid}">
                          <f:selectItems value="#{PayrollBean.jobs}"/>
                          <a4j:support event="onchange" reRender="employeesList"/> 
                      </h:selectOneMenu>
                </td>
            </tr>
            <tr>
                <td>Select  Employee : </td>
                <td>
                   <h:selectOneMenu value="#{PayrollBean.empid}"   id="employeesList" >
                            <f:selectItems value="#{PayrollBean.employees}"/>
                   </h:selectOneMenu><br/>
                </td>
            </tr>
        </table>
    </h:form>
</f:view>

The most important one in this component is the child tag <a4j:support event="onchange" reRender="employeesList"/>, which is making an AJAX call to server whenever a different option is selected to populate dropdownlist with id employeesList. This is how we provide support for AJAX in the context of JSF. Tag support is taken from a4j library that is provided by RichFaces. JSP uses JSF managed bean called PayrollBean, which is given below.

PayrollBean.java

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import javax.faces.model.SelectItem;

public class PayrollBean {
   private String jobid;
   private String empid;

    public String getEmpid() {
        return empid;
    }

    public void setEmpid(String empid) {
        this.empid = empid;
    }

    public String getJobid() {
        return jobid;
    }

    public void setJobid(String jobid) {
        this.jobid = jobid;
        System.out.println(jobid);
    }

    public double getSalary() {
        return salary;
    }

    public void setSalary(double salary) {
        this.salary = salary;
    }
   private double salary;

   public List<SelectItem> getJobs(){
       ArrayList<SelectItem> jobs = new ArrayList<SelectItem>();
       jobs.add(new SelectItem("0","--- Select Job ---"));
       try {
            Connection con = getConnection();
            Statement st = con.createStatement();
            ResultSet rs = st.executeQuery("select job_id,job_title from jobs order by job_title");
            while (rs.next()) {
                jobs.add(  new SelectItem(rs.getString("job_id"),rs.getString("job_title")));
            }
            rs.close();
            st.close();
            con.close();
       }
       catch(Exception ex) {
           System.out.println(ex.getMessage());
       }
       return jobs;
   }

   public List<SelectItem> getEmployees(){
       ArrayList<SelectItem> employees = new ArrayList<SelectItem>();
       employees.add( new SelectItem("0","--Select Employee ---"));

       if ( jobid == null || jobid.equals("0"))
           return employees;
       try {
            Connection con = getConnection();
            PreparedStatement ps = con.prepareStatement("select employee_id, first_name from employees where job_id = ?");
            ps.setString(1,jobid);
            ResultSet rs = ps.executeQuery();
            while (rs.next()) {
                employees.add(new SelectItem(rs.getString("employee_id"),rs.getString("first_name")));
            }
            rs.close();
            ps.close();
            con.close();
       }
       catch(Exception ex) {
           System.out.println(ex.getMessage());
       }
       return employees;
   }
   public Connection getConnection() throws Exception {
       Class.forName("oracle.jdbc.driver.OracleDriver");
       Connection con  = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","hr","hr");
       return con;
   }
}

faces-config.xml

  <managed-bean>
        <managed-bean-name>PayrollBean</managed-bean-name>
        <managed-bean-class>PayrollBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>

Post Your Comment

Enter the code given in the above image :