Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

6.1.6.  < a4j:commandButton > available since 3.0.0

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.


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.

Table of <a4j:commandButton> attributes.


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