Отключить кнопку и показать загружаемое изображение во время обработки JSF

Question

У меня есть этот модуль в моем webapp, где мне нужно обновить каталоги.

Идея заключается в том, чтобы отключить h:commandButton и показатьh:graphicImage, оба действия должны происходить сразу после того, кнопка была нажата. Наконец, когда процесс обновления закончился он должен сделать по-другому, скрытьh:graphicImage, позволяютh:commandButton, но на этот раз показать этикетку h:outputText что говорит либо «Update Success» или «Update Failure».

Проблема в моем коде заключается в том, что изображение и метка отображаются сразу после завершения процесса, и я не могу найти способ сделать то, что я описал выше.

Где или что я не хватает ?,

Приветствия.

<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

Моя DEV среда:

• Mojarra 2.1.6
• RichFaces 4.1.0.Final
• Tomcat 7.0.14 (тест)/Tomcat 7.0 .22 (prod)

Answer 1

Вместо этого вам нужно показать и скрыть изображение от JS.

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

с

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