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.2.  The <a4j:commandButton> component rendered in Blue Sky skin

To create the simplest variant of the component on a page use the following syntax:

Example:

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

The example above creates a button on a page clicking on which causes an Ajax form submit on the server, "action" method performance, and rendering the component with "someData" ID after response comes back.

Example:

import org.ajax4jsf.component.html.HtmlAjaxCommandButton;

...

HtmlAjaxCommandButton myButton = new HtmlAjaxCommandButton();

...

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.

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

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

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

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