Disable button and show loading image while processing JSF

Question

I have this module in my webapp where i need to update come catalogs.

The idea is to disable the h:commandButton and show a h:graphicImage, both actions are supposed to happen right after the button was clicked. Finally, when the update process has ended it should do the other way, hide the h:graphicImage, enable the h:commandButton but this time also show a label h:outputText that says either 'Update Success' or 'Update Failure'.

The problem in my code is that the image and the label appear right after the process is finished and I can't find the way to do what I described above.

Where or what am I missing?,

Cheers.

    <a4j:commandButton id="btnActualiza" value="Actualizar catálogos"
                       render="messageCatalogos actualizacionCorrecta
                       @this imgProcesando"
                       onclick="this.disabled=true;"
                       oncomplete="this.disabled=false"
                       actionListener="#{administrationBean.doImgProcesandoVisible}"
                       action="#{administrationBean.doActualizaCatalogos}"/>
    <a4j:outputPanel id="imgProcesando">
        <h:graphicImage rendered="#{administrationBean.imgProcesandoRendered}"
                        url="img/imgLoading.gif"/>
    </a4j:outputPanel>
    <h:panelGroup/>
    <h:panelGroup/>
    <a4j:outputPanel id="actualizacionCorrecta" style="font-size: 14px; color: #D17100">
        <h:outputText rendered="#{administrationBean.actualizacionCorrectaLabelRendered}"
                      value="Actualización correcta !"/>
        <h:outputText rendered="#{administrationBean.actualizacionFalloLabelRendered}"
                      value="Fallo la actualización !"/>
    </a4j:outputPanel>

UPDATE

My dev environment:

• Mojarra 2.1.6
• RichFaces 4.1.0.Final
• Tomcat 7.0.14(test) / Tomcat 7.0.22(prod)

Answer 1

You need to show and hide the image by JS instead.

<h:graphicImage id="loading" url="img/imgLoading.gif" style="display:none" />

with

<a4j:commandButton ...
    onbegin="this.disabled=true; $('#formId\\:loading').show()"
    oncomplete="this.disabled=false; $('#formId\\:loading').hide()"
/>