PrimeFaces - Chips With Ajax update Example

In the last example we saw how to use PrimeFaces Chips component. In this example, we will see how to submit chips component's list via Ajax.

JSF page

src/main/webapp/index.xhtml

<h:body style="margin-left:30px">
    <h2>PrimeFaces Chips With Ajax Example</h2>

    <h:form>
        <p:outputLabel for="items" value="Items: "/>
        <br/>
        <p:chips id="items" value="#{itemsBean.items}">
            <p:ajax event="itemSelect" update=":itemList"/>
            <p:ajax event="itemUnselect" update=":itemList"/>
        </p:chips>
    </h:form>

    <p:outputPanel id="itemList">
        <p:repeat value="#{itemsBean.items}" var="item">
            <h:outputText value="#{item}"/>
            <br/>
        </p:repeat>
    </p:outputPanel>

</h:body>

The managed bean

@ManagedBean
@ViewScoped
public class ItemsBean {
  private List<String> items = new ArrayList<>();

  public List<String> getItems() {
      return items;
  }

  public void setItems(List<String> items) {
      this.items = items;
  }
}

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• JDK 1.8
• Maven 3.3.9