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:
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()"
/>