Primefaces blockUI 在 ajax 更新后停止工作 [英] Primefaces blockUI stops working after ajax update

问题描述

我正在尝试创建一个数据表，该表在繁忙时显示一个 blockUI，而且我大部分时间都取得了成功.现在，每当我单击两个 commandButton 中的任何一个、通过单击标题对数据表进行排序或浏览数据表时，它都会变灰并显示正在加载...".你可以在下面看到它的代码.

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

• 加载页面
• 单击数据表标题 - blockUI 出现直到表完成排序
• 单击数据表页面导航按钮之一 - blockUI 出现直到页面加载
• 单击其中一个命令按钮 - blockUI 出现，直到按钮的 actionListener 完成
• 单击数据表标题 - 表排序，但不显示 blockUI.
• 单击数据表页面导航按钮之一 - 页面加载，但块 UI 未出现
• 单击其中一个命令按钮 - actionListener 运行并更新表，但块 UI 不出现
• 重新加载页面 - 一切再次正常

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

有什么想法吗?

<p:commandButton ... update="resultsPanel" id="submitButton" .../>...<p:commandButton ... update="resultsPanel" id="resetScenarioButton" .../>
<p:panel header="Results Grid" id="resultsPanel">...<p:dataTable ... id="VAResults" ... >...</p:dataTable>....</p:面板><p:blockUI block="resultsPanel" trigger="submitButton, resetScenarioButton, VAResults">正在加载...</p:blockUI>

解决方案

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

...<p:dataTable ... id="VAResults" ... >...</p:dataTable>....<p:blockUI block="resultsPanel" trigger="submitButton, resetScenarioButton, VAResults">正在加载...</p:blockUI></p:面板>

I am trying to create a datatable that displays a blockUI whenever it is busy, and I have been mostly successful. It now grays out and shows "Loading..." whenever I click either of two commandButtons, sort the datatable by clicking on a header, or page through the datatable. You can see the code for it below.

The problem is that after I have used one of the commandButtons (which runs an ajax update on the blocked element), subsequent actions do not trigger the blockUI (until I refresh the page). For example:

• Load page
• Click a datatable header - blockUI appears until table is finished sorting
• Click one of the datatable page navigation buttons - blockUI appears until the page is loaded
• Click one of the commandButtons - blockUI appears until the button's actionListener has finished
• Click a datatable header - table sorts, but blockUI does not appear.
• Click one of the datatable page navigation buttons - page loads, but blockUI does not appear
• Click one of the commandButtons - actionListener runs and table updates, but blockUI does not appear
• Reload the page - everything works properly again

Changing the commandButtons' update="" attribute to ajax="false" causes the sorting/paging to always display the blockUI, but the commandButtons to never display the blockUI.

Any ideas?

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

解决方案

The trigger attribute binds jQuery listeners on the specified elements. However if you update an element the binding gets lost. I don't know if it works, but you could try moving the <p:blockUI inside the resultsPanel. I suspect that when you update the panel the blockUI gets updated too and thus re-binding the listener to the data table.

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

这篇关于Primefaces blockUI 在 ajax 更新后停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！