This is an analog of the standard <h:commandButton> component extended with Ajax features making it possible to use Ajax request instead of form submission to execute an action and/or reload components.

API Reference | Tag Reference
Online Demo

Key Features

  • All features of the standard CommandButton component
  • Support for Ajax action execution
  • Support for Ajax component submission/reloading
  • Allows specifying type="button"
  • Specifying complex content with child components

General Information

The <o:commandButton> component is API-compatible with the standard <h:commandButton> component and if no extended options are specified it behaves in the same way as its standard analog.

You can turn on the Ajax mode and configure the button to reload the specified set of components instead of reloading the whole page by specifying its render attribute. This attribute is specified as a space-separated list of component Ids in the same way as the render attribute of the Ajax component. Specifying this attribute will also make action and/or actionListener specified for the button to be executed during the Ajax request as well. If the Ajax mode is turned on for the button it doesn't submit data for form's components for processing on the server by default, so if you'd like to include some particular components into the Ajax request, for their data to be available during action execution or be saved through bindings, you can specify the execute attribute. Like the action attribute, this attribute is specified as a space-delimited list of component Ids in the same way as for the Ajax component. Here's a simple example:

<h:inputText id="firstName" value="#{MyBean.firstName}"/>
<h:inputText id="lastName" value="#{MyBean.lastName}"/>
<o:commandButton value="Execute" 
        execute="firstName lastName" 
<h:outputText id="fullName" value="#{MyBean.fullName}"/>

When in the Ajax mode, CommandButton provides the Ajax request lifecycle notifications through its onajaxstart, onajaxend, and onerror events.

As opposed to the standard <h:commandButton> component, which resticts the values of its type attribute to "submit" and "reset", the <o:commandButton> component allows specifying an additional "button" value which is one of the standard HTML button types and it allows turning off automatic form submission when the button is pressed.

Specifying Complex Button Content

You can specify the content displayed in the button in two ways:

  • Using the value attribute, which displays the specified text value in the button like when using the standard <h:commandButton> component.
  • Placing any components or HTML markup as child tags of the <o:commandButton> tag. Doing so you are not limited by the text-only button content provided by the value attribute and can display button's content of any complexity as required by application's design.

When both the value attribute and child components are specified, the content specified with the child components is displayed.

Here's a simple example that demonstrates displaying an image besides the text in a button:

<o:commandButton action="#{}" ...>
  <h:graphicImage url="searchIcon.gif"/>
  <h:outputText value="Search"/>