Primefaces blockUI stops working after ajax update

Question

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>

Orellana

i kinda have a similar scenario as your in my project but i update the whole form after the button clicks... i dunno if thats what you want to do though – Griffy

Answer 1

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>

Misadvise

i had same problem but your answer solved it.. i had put blockui outside the form and thats why i got a problem well thanks man (Y) – Loyce

Answer 2

I've had the same problem and kind of simillar scenario:

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

The problem was that panel buttons was both updated by ajax, and blocked by blockUI. I had to divide it in two:

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

Volnak

I don't see what triggers blockUI here? – Bettencourt

I'm triggering blockUI programatically from code, if I remember right. – Volnak

Answer 3

@siebz0r already provided the explanation why blockUI stops working when a component is updated.

I am using a one blockUI element in the template for all other pages and thus don't want to include more blockUI elements.

If the blockUI element is updated as well one does not need to move the blockUI inside the component that will be updated.

Here is an example:

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

The element blockUiBinding can be located anywhere, as long as it can be updated. It is wrapping the blockUI element, because blockUI generates at least two different divs. So when the wrapping element is updated also the blockUI will be updated.

Gloxinia