f:ajax 请求的 p:ajaxStatus答案

【问题标题】：p:ajaxStatus for f:ajax requestsf:ajax 请求的 p:ajaxStatus
【发布时间】：2011-08-29 08:02:51
【问题描述】：

我想将 Primefaces p:ajaxStatus 用于正常的 f:ajax 请求。或者也许有一个用于普通 JSF ajax 请求的状态图标的开源组件，我可以像 Primefaces 一样使用和设置样式？

【问题讨论】：

相关：stackoverflow.com/questions/3556676/… 和 stackoverflow.com/questions/7043840/…

【解决方案1】：

您实际上并不需要组件。一段简单的 Javascript 就可以完成（以下是概念验证，没有 ajax 错误处理，一次只支持一个 ajax 请求，没有特殊的 js 库 - 修复留给读者练习）：

<img id='busy' src='busy.png' style='display: none'>
<img id='notbusy' src='notbusy.png'>
<script>
  var evil_global_busy = document.getElementById('busy')
  var evil_global_notbusy = document.getElementById('notbusy')
  jsf.ajax.addOnEvent(function(e){
     if (e.status == "begin") {
        evil_global_busy.style.display = '';
        evil_global_notbusy.style.display = 'none';
     }
     if (e.status == "success") {
        evil_global_busy.style.display = 'none';
        evil_global_notbusy.style.display = '';
     }
  })
</script>

【讨论】：

【解决方案2】：

基于PrimeFace，覆盖站点的所有ajax请求，包括属性'update'

<p:ajaxStatus>
   <f:facet name="start">
       <h:graphicImage library="image" name="loading.gif" />
    </f:facet>
    <f:facet name="error">
       <h:outputText value="Error. " />
    </f:facet>
       <f:facet name="complete">
    <h:outputText value="" />
    </f:facet>
 </p:ajaxStatus>

【讨论】：