Disabling an a4j:commandButton after click

Question

I have an a4j command button which displays a loader in a pop-up panel using a4j:status onstart and onstop events. After action method linked with a4j:commandButton is completed, I want the button to be displayed as disabled on the screen.

I have created a boolean variable in backing bean of disableBtn which gets set to true in action method of a4j commandButton. when I render the button, the pop-up containing the loader doesn;t disappear

<h:form>
    <a4j:status id="waitingMessage"
     onstart="#{rich:component('modalPanelId')}.show()"
     onstop="#{rich:component('modalPanelId')}.hide()">
    </a4j:status>

    <rich:popupPanel id="modalPanelId" modal="true"
    autosized="true">
    <h:graphicImage library="images" name="loading.gif" />
    </rich:popupPanel>

    <rich:panel id="updatePanel">                                                                                                                   
    <div>
         <a4j:commandButton value="Confirm Action"
         styleClass="btn right" 
         disabled="#{bean.disableBtn}"
         actionListener="#{bean.confirmAction}"
         execute="@this" render="updatePanel"
         immediate="true" />

    </div>
    </rich:panel>


</h:form>

Pop-up panel with loader should disappear upon completion of action of a4j:commandButton and button should be rendered as disabled.

Answer 1

A source of action cannot disable itself (I don't recall if this is a JSF thing or just RichFaces). Once the action is finished you got to have another component disable and rerender the button in response, simple a4j:jsFunction should do. Something like:

<a4j:jsFunction name="setEnabled" render="button">
  <a4j:param name="enabled" assignTo="#{bean.buttonEnabled}"/>
</a4j:jsFunction>

<a4j:commandButton … oncomplete="setEnabled(false)" />