11

忙しいときはいつでもblockUIを表示するデータテーブルを作成しようとしていますが、ほとんど成功しています。2つのコマンドボタンのいずれかをクリックするか、ヘッダーをクリックしてデータテーブルを並べ替えるか、データテーブルをページングするたびに、グレー表示されて「読み込み中...」と表示されます。以下にそのコードを示します。

問題は、コマンドボタンの1つ（ブロックされた要素に対してajax更新を実行する）を使用した後、後続のアクションがblockUIをトリガーしないことです（ページを更新するまで）。例えば：

  • ページを読み込む
  • データテーブルヘッダーをクリックします-テーブルの並べ替えが完了するまでblockUIが表示されます
  • データテーブルページのナビゲーションボタンの1つをクリックします-ページが読み込まれるまでblockUIが表示されます
  • commandButtonの1つをクリックします-ボタンのactionListenerが終了するまでblockUIが表示されます
  • datatableヘッダーをクリックします-テーブルは並べ替えられますが、blockUIは表示されません。
  • データテーブルのページナビゲーションボタンの1つをクリックします-ページは読み込まれますが、blockUIは表示されません
  • commandButtonの1つをクリックします-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によってブロックされたことでした。私はそれを2つに分けなければなりませんでした：

<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が機能しなくなる理由をすでに説明しています。

他のすべてのページのテンプレートで1つの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は少なくとも2つの異なるdivを生成するため、blockUI要素をラップしています。したがって、wrapping要素が更新されると、blockUIも更新されます。

于 2019-10-16T10:35:38.723 に答える