如何在 grails remoteFunction 中使用 onLoading 事件答案

【问题标题】：How to use onLoading event in grails remoteFunction如何在 grails remoteFunction 中使用 onLoading 事件
【发布时间】：2009-04-17 04:38:03
【问题描述】：

我在 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>

谁能提供这方面的帮助。

【问题讨论】：

标签： ajax frameworks grails

【解决方案1】：

您可以为 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>

【讨论】：

【解决方案2】：

如果你使用 JQuery 插件，使用这个：

$(document).ready(function() {
    $("#spinner").bind("ajaxSend", function() {
        $(this).fadeIn();
    }).bind("ajaxComplete", function() {
        $(this).fadeOut();
    })}
);

【讨论】：