在执行操作前重新加载页面的某些部分？

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