6.1.6. < a4j:commandButton > available since 3.0.0

### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.1.6. < a4j:commandButton > available since 3.0.0

expand all

#### 6.1.6.1. Description

The <a4j:commandButton> component is very similar to JSF <h:commandButton> , the only difference is that an Ajax form submit is generated on a click and it allows dynamic rerendering after a response comes back.

Figure 6.3. The <a4j:commandButton> component rendered in Blue Sky skin

#### 6.1.6.2. Details of Usage

The <a4j:commandButton> component is used in the same way as JSF <h:commandButton> . The difference is that in case of <a4j:commandButton> the components to be updated should be specified.

The example above generates the following HTML code:

    <input type="submit" onclick="A4J.AJAX.Submit(request parameters);return false;" value="Button"/>

Сlicking the generated anchor fires the utility method `A4J.AJAX.Submit()` that perfroms Ajax request.

## Note:

The <a4j:commandButton> already has Ajax support built-in and there is no need to add <a4j:support> .

The usage of the keyword `'this'` in JavaScript code in the value for "oncomplete" attribute depends on the location of <a4j:commandButton> . If the <a4j:commandButton> is situated outside the re-rendered region it is possible to use keyword 'this' as in the following example:

    <h:form>

          <a4j:commandButton action="director.rollCamera" onclick="this.disabled=true" oncomplete="this.disabled=false" />

    </h:form>

Otherwise, if the <a4j:commandButton> is contained in a re-rendered region than the "oncomplete" attribute has a problem with obtaining a reference of the commandButton object when using the keyword `'this'`. In this case use the "oncomplete" attribute as in the following example:

    <h:form id="form">

          <a4j:commandButton id="cbutton" action="director.rollCamera" onclick="this.disabled=true" oncomplete="document.getElementById('form:cbutton').disabled=false" />

    </h:form>

Common JSF navigation could be performed after an Ajax submit and partial rendering, but Navigation Case must be defined as <redirect/> in order to avoid problems with some browsers.

As any Core Ajax component that sends Ajax requests and processes server responses the <a4j:commandButton> has all attributes that provide the required behavior of requests (delay, limitation of submit area and rendering, etc.)

## Note:

When attaching a JavaScript API function to the <a4j:commandButton> with the help of the <rich:componentControl> do not use the "attachTo" attribute of the last one. The attribute adds event handlers using `Event.observe` but <a4j:commandButton> has no such event. The example below will not work:

    <a4j:commandButton value="Show Current Selection" reRender="table" action="#{dataTableScrollerBean.takeSelection}" id="button">

          <rich:componentControl attachTo="button" for="panel" event="oncomplete" operation="show" />

    </a4j:commandButton>

This one should work properly:

    <a4j:commandButton value="Show Current Selection" reRender="table" action="#{dataTableScrollerBean.takeSelection}" id="button">

          <rich:componentControl for="panel" event="oncomplete" operation="show" />

    </a4j:commandButton>

Information about the "process" attribute usage you can find in the "Decide what to process" guide section.

#### 6.1.6.3. Reference Data

Table of <a4j:commandButton> attributes.

Table 6.6. Component Identification Parameters

Name | Value
--- | ---
component-type | org.ajax4jsf.CommandButton
component-family | javax.faces.Command
component-class | org.ajax4jsf.component.html.HtmlAjaxCommandButton
renderer-type | org.ajax4jsf.components.AjaxCommandButtonRenderer

#### 6.1.6.4. Relevant Resources Links

Visit CommandButton demo page at RichFaces live demo for examples of component usage and their sources.

- Prev6.1.5. < a4j:support > ...
- Top of page
- Front page
- Next6.1.7. < a4j:commandLink > ...