Close

PrimeFaces - Chips With Ajax update Example

[Last Updated: Aug 4, 2017]

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;
  }
}

To try examples, run embedded tomcat (configured in pom.xml of example project below):

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

PrimeFaces Chips With Ajax Example Select All Download
  • chips-with-ajax-example
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp
          • index.xhtml

    See Also