It's hard enough to find an error in your code when you're looking for it; it's even harder when you've assumed your code is error-free.

Simple sample

a4j:ajax is one of our core behaviors, extending the base JSF 2.0 f:ajax tag. This tag triggers an Ajax request when the specified parent event is triggered.">
<ui:composition xmlns=""
        <h:inputText value="#{}">
            <a4j:ajax event="keyup" render="out" />
        <h:outputText value="#{}" id="out" />
Dynamic Selects
This is a slightly more complex use-case for arj:ajax involving dependent select components. When you choose a value from the first select component, the second select component is rendered with dynamic content based on you first choice.">
<ui:composition xmlns=""
        <h:selectOneMenu value="#{selectsBean.currentType}"
            <f:selectItems value="#{selectsBean.firstList}" />
            <a4j:ajax event="valueChange" render="second" execute="@this" />
        <a4j:outputPanel id="second" layout="block">
            <h:selectOneMenu value="#{selectsBean.currentType}"
                rendered="#{not empty selectsBean.currentType}">
                <f:selectItems value="#{selectsBean.secondList}" />
package org.richfaces.demo.common;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.event.ValueChangeEvent;
import javax.faces.model.SelectItem;

 * @author Ilya Shaikovsky
@ManagedBean(name = "selectsBean")
public class SelectsBean {
    private static final String[] FRUITS = { "", "Banana", "Cranberry", "Blueberry", "Orange" };
    private static final String[] VEGETABLES = { "", "Potatoes", "Broccoli", "Garlic", "Carrot" };
    private String currentItem = "";
    private String currentType = "";
    private List firstList = new ArrayList();
    private List secondList = new ArrayList();

    public SelectsBean() {
        SelectItem item = new SelectItem("", "");

        item = new SelectItem("fruits", "Fruits");
        item = new SelectItem("vegetables", "Vegetables");

        for (int i = 0; i < FRUITS.length; i++) {
            item = new SelectItem(FRUITS[i]);

    public List getFirstList() {
        return firstList;

    public List getSecondList() {
        return secondList;

    public static String[] getFRUITS() {
        return FRUITS;

    public static String[] getVEGETABLES() {
        return VEGETABLES;

    public void valueChanged(ValueChangeEvent event) {
        if (null != event.getNewValue()) {
            String[] currentItems;

            if (((String) event.getNewValue()).equals("fruits")) {
                currentItems = FRUITS;
            } else {
                currentItems = VEGETABLES;

            for (int i = 0; i < currentItems.length; i++) {
                SelectItem item = new SelectItem(currentItems[i]);


    public String getCurrentType() {
        return currentType;

    public void setCurrentType(String currentType) {
        this.currentType = currentType;

    public String getCurrentItem() {
        return currentItem;

    public void setCurrentItem(String currentItem) {
        this.currentItem = currentItem;

  • Ajax Action

  •   a4j:ajax
      Command Button Simple
      Command Link Simple
      jsFunction Simple
      Poll Simple
      Param Simple Usage
      Parameters for non-Ajax components
      Parameters from client side

  • Ajax Queue

  •   Queue

  • Ajax Output/Containers

  •   outputPanel Simple
      Auto update for h:messages component
      Common status for view
      Status Simple
      Referenced status
      Referenced status
      mediaOutput for image output
      Log usage

  • Validation

  •   Standard JSF Validators
      JSR-303 Validators
      Password Validation
      Simple rich:message sample
      Simple rich:messages sample

  • Data Iteration

  •   Simple Grid Creation
      Data Table Basic
      Data Table Styling
      Data Table Sorting
      Data Table Filtering
      Data Table Edit
      ExtendedData Table Basic Usage
      ExtendedData Table Selection usage
      rich:collapsibleSubTable Basic Usage
      DataScroller Basic Usage
      DataScroller API
      Data Lists Component
      Data Grid Component

  • Trees

  •   Simple tree from XML
      Simple treeModelRecursiveAdaptor usage

  • Output/Panels

  •   Simple Panels
      Look and feel customization
      Simple Toggle Panel
      Wizard creation
      Simple Tab Panels rich:tabPanel
      Selected Tab Management
      Simple Collapsible Panel rich:collapsiblePanel
      Simple Accordion rich:accordion
      Simple popup example rich:popupPanel
      Modal panel example
      Login panel positioning
      ProgressBar in ajax mode rich:progressBar
      ProgressBar in client mode
      Simple tooltips rich:tooltip

  • Menus

  •   Simple Panel Menu rich:panelMenu
      Simple Toolbar rich:toolbar
      Icons Customization
      Top Menu rich:dropDownMenu
      Side Menu rich:dropDownMenu

  • Inputs and Selects

  •   Autocomplete in Cached Ajax mode rich:autocomplete
      Custom client filter
      Simple Calendar rich:calendar
      Client Side Styling Disablement rich:calendar
      Data Model Support
      Different Sliders samples rich:inputNumberSlider
      Different Spinners samples rich:inputNumberSpinner
      Inplace Inputs samples rich:inplaceInput
      Inplace Selects samples rich:inplaceSelect
      Upload images rich:fileUpload
      Drag and Drop usage example rich:dragIndicator
      Drag Indicator usage example rich:dragIndicator

  • Miscellaneous

  •   Standard elements skinning feature
      RichFaces Functions
      Table Filtering using componentControl and API rich:componentControl
      Passing hash options to rich:popupPanel
      jQuery usage