11

我正在尝试创建一个在忙碌时显示 blockUI 的数据表，而且我基本上是成功的。现在，每当我单击两个命令按钮中的任何一个、通过单击标题对数据表进行排序或翻阅数据表时，它都会变灰并显示“正在加载...”。你可以在下面看到它的代码。

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

  • 加载页面
  • 单击数据表标题 - blockUI 出现，直到表完成排序
  • 单击数据表页面导航按钮之一 - blockUI 出现，直到页面加载
  • 单击其中一个命令按钮 - blockUI 出现，直到按钮的 actionListener 完成
  • 单击数据表标题 - 表排序，但 blockUI 不出现。
  • 单击数据表页面导航按钮之一 - 页面加载，但 blockUI 未出现
  • 单击其中一个命令按钮 - 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>
4

3 回答 3

22

该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>
于 2012-09-12T16:42:53.143 回答
0

我遇到了同样的问题和类似的场景：

<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"/>
于 2012-09-24T10:34:27.580 回答
0

@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 也会更新。

于 2019-10-16T10:35:38.723 回答