ajax – 如何在grails remoteFunction中使用onLoading事件

我在grails中做一个web应用程序.我在gsp页面中使用remoteFunction.它现在正在工作.在“onloading”事件中我想调用“showSpinner()” javascript函数.我的示例gsp代码是：

<div class="menuButton" onclick="${remoteFunction(action: 'index',controller: 'file',update: [success: 'ajax',failure: 'ajax'])}">
      <label class="menu">File upload</label>
  </div>

任何人都可以提供帮助.

解决方法

您可以为Prototype Ajax请求的onLoading事件全局注册所谓的Ajax.Responder.这将触发页面中的每个remoteFunction / Ajax调用.要做到这一点,你应该在你的gsp页面或布局中放置这样的东西：

<script type="text/javascript">
function showSpinner() {
   // Todo show spinner
}
function hideSpinner() {
   // Todo hide spinner
}
Ajax.Responders.register({
   onLoading: function() {
      showSpinner();
   },onComplete: function() {
      if(!Ajax.activeRequestCount) hideSpinner();
   }
});
</script>

当然,您需要实现showSpinner和hideSpinner函数.作为一个完整的例子,你可以使用类似的东西：

<script type="text/javascript">
   function showSpinner() {
      $('spinner').show();
   }
   function hideSpinner() {
      $('spinner').hide();
   }
   Ajax.Responders.register({
      onLoading: function() {
         showSpinner();
      },onComplete: function() {     
         if(!Ajax.activeRequestCount) hideSpinner();
      }
   });
</script>
<div id="spinner" style="display: none;">
   <img src="${createLinkTo(dir:'images',file:'spinner.gif')}" alt="Loading..." width="16" height="16" />
</div>