p:blockUI 在 Ajax 调用完成后仍处于阻塞状态

Question

我在 Java/JSF 应用程序中使用 PrimeFaces 工具包。我在应用程序中有几个位置，我将在其中执行一些相对较长的运行 Web 服务调用。我想防止用户重复提交呼叫，同时还提供某种指示 "something" 正在发生并等待并耐心等待。

为此，我使用了名为 'BlockUI' 的 PrimeFaces 组件。它完全符合我的需要，但是，使用我现有的验证消息和标记来实现它会出现问题。

问题在于，一旦与按钮按下相关的 ajax 调用完成，UI 的阻塞部分仍然被阻塞，即使在下方呈现错误消息之后也是如此。以下是与按钮标记相关的代码：

<h:panelGroup id="formNC3EditPageCenterBox" layout="block"
    class="centerBox">

    <h:panelGroup id="formNC3EditPageFormGroup" layout="block">

        <h:form id="formNC3Form">

            <h:panelGroup id="errorMessageContainer" layout="block"
                rendered="#{facesContext.isValidationFailed()}">
                <h:panelGrid id="errorMessageGrid" columns="2">
                    <h:graphicImage name="images/error.png" alt="error icon" />
                    <h:messages class="requiredLabel" layout="table" globalOnly="true" />
                </h:panelGrid>
            </h:panelGroup>

            <h:panelGroup layout="block" id="formNC3SaveAndCancelButtonGroup"
                class="centerButtonContainer">
                <p:commandButton id="formNC3SaveButton" value="#{labels.save}"
                    actionListener="#{stateAnnualFormManagedBean.save()}"
                    update="formNC3Form" />

                <h:outputText value="&#160;" />
                <h:commandButton id="formNC3CancelButton" value="#{labels.cancel}"
                    action="#{stateAnnualFormManagedBean.handleCancelAction()}"
                    ajax="false" />
                <p:blockUI widgetvar="block" block="formNC3EditPageCenterBox"
                    trigger="formNC3SaveButton" animate="false">
                    <h:graphicImage name="images/ajax-loader.gif" alt="ajax-loader" />
                    <h:outputText value="#{labels.processing}" />
                </p:blockUI>
            </h:panelGroup>

        </h:form>
    </h:panelGroup>
</h:panelGroup>

请注意，这不是整个页面，而是所有与功能相关的部分都存在。以下是 Java 支持 bean 的相关部分：

//I call a 'save' method which executes a web service call in a try block

try {
  webservice.call(pseudocode);
} catch (ValidationException vx) {
  // if validation errors are returned I set something in the faces messages
        FacesMessage message = new FacesMessage();
        message.setSummary(PageUtilities
                .fetchMessage("some.package.name", messageKey, null));
        message.setSeverity(FacesMessage.SEVERITY_ERROR);
        context.addMessage(null, message);
        context.validationFailed();
        context.renderResponse();
} catch (WebServiceException wx) {
  // if the webservice call fails i also set a message
        FacesMessage message = new FacesMessage();
        message.setSummary(PageUtilities
                .fetchMessage("some.package.name", messageKey, null));
        message.setSeverity(FacesMessage.SEVERITY_ERROR);
        context.addMessage(null, message);
        context.validationFailed();
        context.renderResponse();
}

所以，最终发生的事情是这样的，我点击提交按钮，阻止 UI 开始生效，阻止了页面的查看。 Web 服务调用结束，就我而言，现在它失败了。块 UI body 消失，Web 服务错误呈现在页面顶部 - 但是 - 目标组件的块 UI 'graying-out' 仍然存在。之后我无法点击任何东西，界面仍然是'blocked'。

我怀疑这与项目更新到 UI 的顺序有关，但我对 JSF 生命周期不够了解，尤其是在添加 ajax 和 PrimeFaces 之后, 知道在哪里寻找错误。任何帮助将不胜感激。

这是删除了一些不太重要的信息的屏幕截图。您可以看到错误已呈现，但 UI 仍然是 'blocked'

** 注意 - 我应该提到，当我定位按钮面板 ID formNC3SaveAndCancelButtonGroup 时，块 UI 组件工作 100% 完美。我对此唯一的抱怨是组件 'body' 显示在按钮容器上方，而 'grayed-out' 区域仅在按钮容器上方。这当然是可以理解的，但我希望动画和灰色区域出现，如果不是整个 body，至少是 Web 应用程序的内容区域。

Answer 1

Tomek - 你的建议是正确的。这与尝试更新同一个节点两次有关，我移动了块 UI 以仅阻止页面的一部分并且它正常工作

“触发器属性在指定元素上绑定 jQuery 侦听器。但是，如果您更新元素，绑定就会丢失。我不知道它是否有效，但您可以尝试移动

p:blockUI 在 Ajax 调用完成后仍处于阻塞状态

p:blockUI remains blocked after Ajax call completes

ajax

jquery

jsf

primefaces

jsf-2