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

<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.

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

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.

## Dynamical creation of a component from Java code

Example:

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

## Key attributes and ways of usage

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.)

## Relevant resources links

Here you can see the example of <a4j:commandButton> usage and sources for the given example.