Отображение spinner.gif в ajax вызове времени загрузки в Grails

Question

Я занимаюсь разработкой веб-приложения в Grails, которое использует много ajax. Мне нужно показать изображение spinner.gif при обработке запроса ajax. Мой пример кода gsp

<div id="ajax-area">
  <g:remoteLink action="list" controller="file" update="ajax-area">
    view files
  </g:remoteLink>
</div>

В приведенном выше коде, если мы нажмем на ссылку просмотра файлов, будет обновлен раздел ajax-area.

Может кто-нибудь показать мне, как обновить ajax-область с помощью spinner.gif при загрузке ajax.

Спасибо

Answer 1

То же самое для jQuery (на самом деле это было связано с плагином Grails jQuery):

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

Answer 2

Интересная ссылка на эту тему: http://blog.oio.de/2010/11/08/how-to-create-a-loading-animation-spinner-using-jquery/

Answer 3

Предполагая, что вы используете Prototype, вы можете добавить что-то вроде этого на страницу (или макет), чтобы показать счетчик:

<script type="text/javascript">
Ajax.Responders.register({
   onCreate: function() {
      if($('ajax-area'))
         $('ajax-area').update('<img src="${createLinkTo(dir:'images',file:'spinner.gif')}" border="0" alt="Loading..." title="Loading..." width="16" height="16" />');
   }
});
</script>

Перезаписывает содержимое элемента 'ajax-area', когда инициируется вызов Ajax.