Primefaces blockUI smette di funzionare dopo l'aggiornamento di un jax

Question

Sto provando a creare un datatable che visualizza un blockUI ogni volta che è occupato, e ho avuto il maggior successo. Ora grigi e mostra "Caricamento in corso ..." ogni volta che faccio clic su uno dei due comandi, ordina il datatable facendo clic su un'intestazione o su una pagina attraverso il datatable. Puoi vedere il codice qui sotto.

Il problema è che dopo aver utilizzato uno dei commandButtons (che esegue un aggiornamento ajax sull'elemento bloccato), le azioni successive non attivano il bloccoUI (finché non aggiorno la pagina). Per esempio:

• pagina Load
• Clicca un colpo di testa DataTable - appare blockUI fino tavolo è finito l'ordinamento
• Fare clic su uno dei pulsanti di navigazione DataTable - appare blockUI fino a quando la pagina viene caricata
• Click uno dei commandButtons - blockUI appare fino a quando il pulsante actionListener non è terminato
• Fare clic su un'intestazione datatable - table sort, ma blockUI non viene visualizzato.
• Fare clic su uno dei pulsanti di navigazione DataTable - caricamento della pagina, ma blockUI non appare
• Fare clic su uno dei CommandButtons - corre ActionListener e aggiornamenti di tabella, ma blockUI non appare
• ricaricare la pagina - tutto funziona di nuovo correttamente

Modifica aggiornamento dei CommandButtons' = '' attributo ajax = 'false' fa sì che l'ordinamento/paging per visualizzare sempre l'blockUI, ma i CommandButtons per non visualizzare il blockUI.

Qualche idea?

<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

L'attributo trigger lega ascoltatori jQuery sugli elementi specificati. Tuttavia, se si aggiorna un elemento, l'associazione si perde. Non so se funziona, ma potresti provare a spostare lo <p:blockUI all'interno dello resultsPanel. Ho il sospetto che quando si aggiorna il pannello venga aggiornato anche blockUI e quindi re-binding del listener alla tabella dei dati.

<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

Ho avuto lo stesso problema e tipo di scenario simillar:

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

Il problema era che pannello pulsanti è stato aggiornato sia da ajax, e bloccato da blockUI. Ho dovuto dividerlo in due:

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