在執行操作前重新加載頁面的某些部分？

Question

我有一個h:commandButton調用一些action="#{bean.do}"。還有一些阿賈克斯請求，該按鈕應該重新設置網站的一部分。在執行操作之前，此重新設置應該發生在之前。我怎樣才能做到這一點？

<h:commandButton action="#{bean.do}"> 
    <f:ajax execute="@form" render="specificId" /> 
</h:commandButton> 

作爲動作do有時需要很長的時間，我想在網頁第一次顯示消息/圖像或同樣。之後首先執行該操作。但是如何？

Answer 1

您可以使用onclick屬性在調用動作之前執行一些JavaScript代碼。

例如爲：

<h:commandButton ... onclick="document.body.style.background='pink'"> 

這可是最好用的<f:ajax>onevent屬性這一點，這樣就可以恢復更改：

<h:commandButton ...> 
    <f:ajax ... onevent="handleDo" /> 
</h:commandButton> 
<img id="progress" src="progress.gif" class="hidden" /> 

與例如這裏面禁用/啓用按鈕，顯示/隱藏形象進度：

function handleDo(data) { 
    var status = data.status; // Can be 'begin', 'complete' and 'success'. 
    var button = data.source; // The HTML element which triggered the ajax. 
    var image = document.getElementById("progress"); // Ajax loading gif? 

    switch (status) { 
     case 'begin': // This is called right before ajax request is been sent. 
      button.disabled = true; 
      image.style.display = "block"; 
      break; 

     case 'complete': // This is called right after ajax response is received. 
      image.style.display = "none"; 
      break; 

     case 'success': // This is called when ajax response is successfully processed. 
      button.disabled = false; 
      break; 
    } 
}