当要阻止的组件通过 AJAX 更新时，PrimeFaces 块 UI 不起作用

Question

我在<p:panel>中显示了一些组件，如下所示。

<p:growl id="growl" />
<p:panel id="panel" header="New User" style="margin-bottom:10px;">
    <p:messages id="messages" />
    <h:panelGrid columns="3">
        <h:outputLabel for="firstName" value="FirstName: *" />
        <p:inputText id="firstName" required="true" label="FirstName">
            <f:validateLength minimum="2" />
        </p:inputText>
        <p:message for="firstName" />
        <h:outputLabel for="surname" value="Surname: *" />
        <p:inputText id="surname" required="true" label="Surname"/>
        <p:message for="surname" />
    </h:panelGrid>
    <p:commandButton id="saveBtn" value="Save" icon="ui-icon-check" 
                     style="margin:0" 
                     actionListener="#{testManagedBean.insert}" 
                     update="growl panel"/>
</p:panel>
<p:blockUI block="panel" trigger="saveBtn" />

按下给定按钮时，需要更新<p:growl>和<p:panel>，这是通过 <p:commandButton> 的 update="growl panel" 属性完成的。 在这种情况下，<p:panel>不会阻止。

仅当update="growl panel"更改为update="growl"即跳过面板更新时，<p:panel>才会被阻止。

有没有办法让<p:blockUI>发挥作用？ <p:panel>应在按下命令按钮时更新。

Answer 1

我选择了PrimeFaces Extensions的<pe:blockUI>，即使在AJAX更新要阻止的组件之后也能很好地工作，如下所示。

<!--xmlns:pe="http://primefaces.org/ui/extensions"-->
<h:outputStylesheet library="default" name="css/block-ui.css"/>
<pe:blockUI target="panel" 
            content="blockPanelContents" 
            widgetVar="blockUIWidget"/>
<h:panelGrid id="blockPanelContents" columns="2" class="block-contents">
    <h:graphicImage library="default" 
                    name="images/ajax-loader1.gif" 
                    class="block-ui-image"/>
    <h:outputText value="Sending data..." class="block-ui-text"/>
</h:panelGrid>
<p:commandButton id="saveBtn" update="growl panel" 
                 onstart="PF('blockUIWidget').block();" 
                 oncomplete="PF('blockUIWidget').unblock();" 
                 actionListener="#{testManagedBean.insert}" 
                 icon="ui-icon-check" value="Save"/>

使用的 CSS 类如 <h:outputStylesheet> 所示：

.block-ui-image {
    margin-right: 12px; vertical-align: middle;
}
.block-ui-text {
    white-space: nowrap;
}
.block-contents {
    border: none !important;
    padding: 0 !important;
    display:none;
}