处理JSF时禁用按钮并显示加载图像 [英] Disable button and show loading image while processing JSF

问题描述

我的Web应用程序中有此模块，我需要在其中更新目录.

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

这个想法是禁用 h:commandButton并显示一个h:graphicImage，这两个动作都应该在单击按钮后立即发生. 最后，当更新过程结束时，应该使用另一种方法，隐藏 h:graphicImage，启用 h:commandButton，但这一次还显示标签h:outputText表示更新成功"或更新失败".

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.

我在哪里或想念什么?

干杯.

    <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>

更新

我的开发环境:

• Mojarra 2.1.6
• RichFaces 4.1.0.Final
• Tomcat 7.0.14(测试)/Tomcat 7.0.22(产品)

推荐答案

您需要改为通过JS显示和隐藏图像.

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

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

这篇关于处理JSF时禁用按钮并显示加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！