Как использовать событие onLoading в Grails RemoteFunction

Question

Я делаю веб-приложение в Grails. Я использую remoteFunction на странице gsp. Теперь он работает. В этом случае в событии «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>

Может ли кто-нибудь помочь с этим?

Answer 1

Вы можете зарегистрировать так называемый Ajax.Responder глобально для события onLoading запросов Prototype Ajax. Это будет срабатывать при каждом вызове 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>

Answer 2

Если вы используете плагин JQuery, используйте это:

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