Question

我正在尝试创建一个在忙碌时显示blockUI的数据表，而且我大部分都成功了。现在，当我单击两个commandButtons中的任何一个时，它会变灰并显示“正在加载...”，通过单击标题对数据表进行排序，或者通过数据表进行分页。你可以在下面看到它的代码。

问题是在我使用了commandButtons之一（在被阻止元素上运行ajax更新）后，后续操作不会触发blockUI（直到我刷新页面）。例如：

加载页面
单击数据表标题 - 出现blockUI直到表完成排序
单击其中一个数据表页面导航按钮 - 出现blockUI直到页面加载
单击其中一个commandButtons - 出现blockUI，直到按钮的actionListener完成
单击数据表标题 - 表排序，但不显示blockUI。
单击其中一个数据表页面导航按钮 - 页面加载，但不显示blockUI
单击commandButtons之一 - actionListener运行和表更新，但不显示blockUI
重新加载页面 - 一切正常运行

将commandButtons的update =“”属性更改为ajax =“false”会导致排序/分页始终显示blockUI，但commandButtons不会显示blockUI。

有什么想法吗？

<div class="buttonDiv">
    <p:commandButton ... update="resultsPanel" id="submitButton" ... />
    ...
    <p:commandButton ... update="resultsPanel" id="resetScenarioButton" ... />
</div>
<p:panel header="Results Grid" id="resultsPanel">
    ...
    <p:dataTable ... id="VAResults" ... >
        ...
    </p:dataTable>
    ....
</p:panel>
<p:blockUI block="resultsPanel" trigger="submitButton, resetScenarioButton, VAResults">
    Loading...
</p:blockUI>

Answer 1

trigger属性绑定指定元素上的jQuery侦听器。但是，如果更新元素，则绑定会丢失。我不知道它是否有效，但您可以尝试移动<p:blockUI内的resultsPanel。我怀疑当你更新面板时，blockUI也会更新，从而将监听器重新绑定到数据表。

<p:panel header="Results Grid" id="resultsPanel">
    ...
    <p:dataTable ... id="VAResults" ... >
        ...
    </p:dataTable>
    ....
    <p:blockUI block="resultsPanel" trigger="submitButton, resetScenarioButton, VAResults">
    Loading...
</p:blockUI>
</p:panel>

Answer 2

我遇到了同样的问题和类似的情节：

<p:dataTable>
    ....
    <p:ajax event="rowSelect" update="buttons" global="false" onstart="blockMessageButtons.show();" oncomplete="blockMessageButtons.hide();"/>
</p:dataTable>

<p:outputPanel layout="block" id="buttons">
    <!-- content to be blocked -->
</p:outputPanel>

<p:blockUI block="buttons" widgetVar="blockMessageButtons"/>

问题是面板按钮既由ajax更新，又被blockUI阻止。我不得不把它分成两部分：

<p:dataTable>
    ....
    <p:ajax event="rowSelect" update="buttons-content" global="false" onstart="blockMessageButtons.show();" oncomplete="blockMessageButtons.hide();"/>
</p:dataTable>

<p:outputPanel layout="block" id="buttons-container">
    <p:outputPanel layout="block" id="buttons-content">
        <!-- content to be blocked -->
    </p:outputPanel>
</p:outputPanel>

<p:blockUI block="buttons-container" widgetVar="blockMessageButtons"/>

Answer 3

@ siebz0r已经提供了解释，为什么在更新组件时blockUI停止工作。

我正在所有其他页面的模板中使用一个blockUI元素，因此不想包含更多的blockUI元素。

如果blockUI元素也被更新，则无需将blockUI移到将要更新的组件内。

这里是一个示例：

<p:panel id="surroundingPanel">

    ...

    <p:commandButton value="ButtonName" styleClass="blockUi"
        action="actionToBeExecuted" update=":surroundingPanel :blockUiBinding" />
</p:panel>

<p:outputPanel id="blockUiBinding">
    <p:blockUI block=":elementToBeBlocked" trigger="@(.blockUi)">
        Loading ...
    </p:blockUI>
</p:outputPanel>

元素blockUiBinding可以位于任何地方，只要可以更新即可。它包装了blockUI元素，因为blockUI至少生成两个不同的div。因此，当包装元素被更新时，blockUI也将被更新。

在ajax更新后，Primefaces blockUI停止工作

3 个答案: