a4j:commandButton

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

## Creating on a page

The simplest tag usage example:

Example:

    ...
    <a4j:commandButton reRender="someData" action="#{bean.action1}" value="Link"/>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.ajax4jsf.component.html.HtmlAjaxCommandButton;
    ...
    HtmlAjaxCommandButton myButton = new HtmlAjaxCommandButton();
    ...

## Key attributes and ways of usage

<a4j:commandButton> is used in the same way as <h:commandButton>, but with definition of the area that is updated after the response comes back from the server.

This definition of the component provides a link, a click on the link causes an Ajax form submit on the server, `action1` method performance, and rendering of the component with `someData` id after the response comes back from the server.

The component <a4j:commandButton> placed on a page generates the following HTML code:

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

Hence, the utility method `A4J.AJAX.Submit` is called on a click, the method performs Ajax request as the <a4j:support> component

Note:

AJAX support is built in and it's not necessary to add nested <a4j:support> to the component.

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

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

Otherwise if the commandButton contained in re-rendered region the "oncomplete" attribute has a problem obtaining a reference of the commandButton object when using the keyword `'this'`. In this case you can 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 sending Ajax requests and processing server responses <a4j:commandButton> has all attributes described above (see <a4j:support> chapter) that provide the required behavior of requests sending (delay, limitation of submit area and rendering, and etc.)

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

## Relevant resources links

On the component LiveDemo page you can see the example of <a4j:commandButton> usage and sources for the given example.