Primefaces blockUI在Ajax更新后停止工作

Question

我正在嘗試創建一個數據表，該數據表在忙時顯示一個blockUI，並且我大多數時候都成功了。 現在，當我單擊兩個commandButton中的任何一個，通過單擊標題對數據表進行排序，或在數據表中翻頁時，它都會變灰並顯示“正在加載...”。 您可以在下面查看其代碼。

問題是，在我使用了其中一個commandButtons（在被阻止的元素上運行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>

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也將被更新。