Интерфейс блока Primefaces перестает работать после обновления ajax

Я пытаюсь создать таблицу данных, которая отображает блок-интерфейс всякий раз, когда он занят, и мне это в основном удалось. Теперь он становится серым и показывает «Загрузка ...» всякий раз, когда я нажимаю любую из двух командных кнопок, сортирую таблицу данных, щелкая заголовок, или просматриваю таблицу данных. Вы можете увидеть код для него ниже.

Проблема в том, что после того, как я использовал один из commandButtons (который запускает обновление ajax для заблокированного элемента), последующие действия не запускают blockUI (пока я не обновлю страницу). Например:

  • Загрузить страницу
  • Щелкните заголовок с данными — блоковый интерфейс отображается до тех пор, пока таблица не закончит сортировку.
  • Нажмите одну из кнопок навигации по страницам с данными — blockUI будет отображаться до тех пор, пока страница не загрузится.
  • Нажмите одну из кнопок commandButton — blockUI будет отображаться до тех пор, пока не завершится прослушивание действий кнопки.
  • Щелкните заголовок с данными — таблица отсортируется, но blockUI не появится.
  • Нажмите одну из кнопок навигации по страницам с данными — страница загружается, но blockUI не отображается.
  • Нажмите одну из командных кнопок — запустится actionListener и обновится таблица, но blockUI не появится.
  • Перезагрузите страницу — все снова работает правильно

Изменение атрибута update="" commandButtons на ajax="false" приводит к тому, что сортировка/разбиение по страницам всегда отображает блок-интерфейс, но commandButtons никогда не отображает блок-интерфейс.

Любые идеи?

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

ajax primefaces jsf-2 blockui
person hypehuman    schedule 12.09.2012    source источник
comment
у меня есть сценарий, аналогичный вашему в моем проекте, но я обновляю всю форму после нажатия кнопки... я не знаю, если это то, что вы хотите сделать, хотя   -  person PermGenError    schedule 12.09.2012

Ответы (3)


arrow_upward
22
arrow_downward

Атрибут trigger привязывает прослушиватели jQuery к указанным элементам. Однако, если вы обновите элемент, привязка будет потеряна. Я не знаю, работает ли это, но вы можете попробовать переместить <p:blockUI внутрь resultsPanel. Я подозреваю, что когда вы обновляете панель, блокирующий интерфейс также обновляется и, таким образом, повторно привязывает слушателя к таблице данных.

<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>
person siebz0r    schedule 12.09.2012
comment
у меня была такая же проблема, но ваш ответ решил ее .. я поставил blockui вне формы, и поэтому у меня возникла проблема, спасибо, чувак (Y) - person mo sean; 26.01.2014

arrow_upward
0
arrow_downward

У меня была такая же проблема и похожий сценарий:

<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"/>
person Kangur    schedule 24.09.2012
comment
Я не вижу, что здесь вызывает blockUI? - person Danijel; 15.02.2013
comment
Я программно запускаю blockUI из кода, если я правильно помню. - person Kangur; 19.03.2013

arrow_upward
0
arrow_downward

@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. Таким образом, при обновлении элемента упаковки также будет обновлен блокUI.

person Hendrik    schedule 16.10.2019