Jquery p:Ajax调用完成后,blockUI仍然被阻止

Jquery p:Ajax调用完成后,blockUI仍然被阻止,jquery,ajax,jsf,jsf-2,primefaces,Jquery,Ajax,Jsf,Jsf 2,Primefaces,我正在Java/JSF应用程序中使用PrimeFaces工具包。我在应用程序中有几个地方可以执行一些运行时间相对较长的web服务调用。我想防止用户在重复提交呼叫的同时,也表示“有什么事情”正在发生,并等待和耐心等待 为了实现这一点,我使用了名为“BlockUI”的PrimeFaces组件。它正是我需要它做的事情,然而,用我已经存在的验证消息和标记实现这一点是一个问题 问题是,一旦与按钮按下相关的ajax调用完成,UI的被阻止部分仍然被阻止,即使在下面呈现了错误消息之后也是如此。以下是与按钮标记相

我正在Java/JSF应用程序中使用PrimeFaces工具包。我在应用程序中有几个地方可以执行一些运行时间相对较长的web服务调用。我想防止用户在重复提交呼叫的同时,也表示“有什么事情”正在发生,并等待和耐心等待

为了实现这一点,我使用了名为“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>
因此,最终的结果是,我单击submit按钮,BlockUI将阻止页面的查看。webservice调用结束了,就我而言,现在它失败了。块UI主体消失,web服务错误呈现在页面顶部-但是-目标组件的块UI“灰显”仍然存在。在那之后我不能点击任何东西,界面仍然是“阻塞的”

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

下面是截图,删除了一些不太重要的信息。您可以看到错误已呈现,但UI仍然“被阻止”


**注意-我应该提到,当我以按钮面板id
formNC3SaveAndCancelButtonGroup
为目标时,块UI组件100%完美地工作。我唯一的抱怨是组件“主体”显示在按钮容器上,“灰显”区域仅显示在按钮容器上。当然,这是可以理解的,但我希望动画和灰色区域出现,如果不是在整个身体上,至少是web应用程序的内容区域。

Tomek-您的建议是正确的。这与尝试两次更新同一个节点有关,我将块UI移动到只块页面的一部分,并且它工作正常


“trigger属性将jQuery侦听器绑定到指定的元素上。但是,如果更新元素,绑定将丢失。我不知道它是否有效,但您可以尝试移动它们。此线程可能会帮助您:
//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();
}