我已经在显示某些组件＆LT;号码：面板＆gt; 如下：

I have displayed some components in <p:panel> as follows.

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

在给定的按钮是pressed，＆LT;电话号码：咆哮＆GT; 和＆LT;电话号码：面板＆gt; 需要更新它是通过更新=咆哮面板属性＆LT进行;号码：的commandButton＆GT; 。 ＆LT;号码：面板＆gt; 不阻止，在这种情况下

When the given button is pressed, <p:growl> and <p:panel> need to be updated which is done through the update="growl panel" attribute of <p:commandButton>. <p:panel> doesn't block, in this case.

＆LT;电话号码：面板＆gt; 被阻塞，只有当更新=咆哮面板更改为更新=咆哮即当面板被更新跳过。

<p:panel> is blocked only when update="growl panel" is changed to update="growl" i.e when the panel is skipped from being updated.

有没有一种方法，使＆LT;电话号码：blockUI＆GT; 工作？ ＆LT;号码：面板＆gt; 应更新pressing命令按钮

Is there a way to make <p:blockUI> work? <p:panel> should be updated on pressing the command button.

推荐答案

我已经交替选择了 PrimeFaces扩展 ＆LT; PE：blockUI＆GT; 甚至阻止由AJAX的更新如下组件后，效果很好。

I have alternatively chosen the PrimeFaces Extensions' <pe:blockUI> that works well even after the component to block is updated by AJAX as follows.

<!--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类＆LT; H：outputStylesheet＆GT; ：

.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;
}