处理 JSF 时禁用按钮并显示加载图像答案

【问题标题】：Disable button and show loading image while processing JSF处理 JSF 时禁用按钮并显示加载图像
【发布时间】：2012-06-05 16:09:42
【问题描述】：

我的 webapp 中有这个模块，我需要更新目录。

这个想法是禁用 h:commandButton 和显示 h:graphicImage，这两个动作都应该在按钮被点击后立即发生。最后，当更新过程结束时，它应该以其他方式执行，隐藏 h:graphicImage，启用 h:commandButton，但这次也显示标签h:outputText表示“更新成功”或“更新失败”。

我的代码中的问题是图像和标签在该过程完成后立即出现，我找不到执行上述操作的方法。

我在哪里或错过了什么？，

干杯。

    <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（产品）

【问题讨论】：

标签： jsf richfaces loading-image

【解决方案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()"
/>

【讨论】：

感谢您的回答。我试过了，但代码$('#loading').show() 不会使图像出现。还有另一种方法吗？可能是 getDocumentById 之类的东西，我不了解 JS，但我已经看到这是获取组件引用的方法...
也许 RichFaces 正在以无冲突模式运行 jQuery。使用jQuery('#loading') 而不是$('#loading')。否则，您始终可以使用良好的 'ol document.getElementById('loading') 并分别设置 .style.display='block' 和 .style.display='none'。
哦，如果图像在表单内，您还需要包含表单 ID。它最终必须是图像的客户端 ID。检查生成的 HTML 源代码。
好的，谢谢，我也会检查这些选项。顺便说一句，你能给我一个简单的客户 ID 解释吗，这让我有些困惑。
客户端 ID 是 JSF 生成的 HTML 元素 ID。在浏览器中打开 JSF 页面，右键单击并查看源代码。找到 JSF 生成的 HTML <img> 元素并查看它的 id。那是<h:graphicImage> 组件的客户端ID。当嵌套在<h:form> 中时，它可能看起来像formId:imageId。您需要在 JavaScript/jQuery 中准确使用该 ID（仅仅是因为他们无法访问 JSF 源代码，而只能访问其生成的 HTML 输出）。