Chặn thủ côngUI ngừng hoạt động sau khi cập nhật ajax

Question

Tôi đang cố gắng tạo một dữ liệu có thể hiển thị blockUI bất cứ khi nào nó bận và tôi hầu như đã thành công. Nó bây giờ grays ra và cho thấy "Loading ..." bất cứ khi nào tôi nhấp vào một trong hai commandButtons, sắp xếp datatable bằng cách nhấp vào một tiêu đề, hoặc trang thông qua các datatable. Bạn có thể xem mã cho nó bên dưới.

Vấn đề là sau khi tôi đã sử dụng một trong các commandButton (chạy bản cập nhật ajax trên phần tử bị chặn), các hành động tiếp theo không kích hoạt blockUI (cho đến khi tôi làm mới trang). Ví dụ:

• trang tải
• Nhấp vào tiêu đề DataTable - blockUI xuất hiện cho đến khi bảng kết thúc sắp xếp
• Bấm một trong những nút trang chuyển hướng DataTable - blockUI xuất hiện cho đến khi trang web được tải
• Bấm một trong những lệnhButtons - blockUI xuất hiện cho đến khi actionListener của nút đã hoàn thành
• Nhấp vào tiêu đề có thể đặt dữ liệu - loại bảng, nhưng blockUI không xuất hiện.
• Bấm một trong những nút trang chuyển hướng DataTable - tải trang, nhưng blockUI không xuất hiện
• Bấm một trong những commandButtons - ActionListener chạy và cập nhật bảng, nhưng blockUI không xuất hiện
• Nạp lại trang - tất cả mọi thứ hoạt động bình thường trở lại

Thay đổi lệnhButtons 'update = "" thuộc tính thành ajax = "false" khiến phân loại/phân trang luôn hiển thị blockUI, nhưng lệnhButtons không bao giờ hiển thị blockUI.

Bất kỳ ý tưởng nào?

<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

Thuộc tính trigger liên kết trình lắng nghe jQuery trên các phần tử được chỉ định. Tuy nhiên nếu bạn cập nhật một phần tử thì ràng buộc sẽ bị mất. Tôi không biết nếu nó hoạt động, nhưng bạn có thể thử di chuyển các <p:blockUI bên trong resultsPanel. Tôi nghi ngờ rằng khi bạn cập nhật các bảng điều khiển blockUI được cập nhật quá và do đó lại ràng buộc người nghe vào bảng dữ liệu.

<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

Tôi đã có cùng một vấn đề và loại kịch bản 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"/> 

Vấn đề là bảng nút được cả cập nhật bởi ajax, và bị chặn bởi blockUI. Tôi đã phải chia nó thành hai:

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