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

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

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

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

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

Спасибо


grails ajax
person DonX    schedule 13.04.2009    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Предполагая, что вы используете 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.

person Siegfried Puchbauer    schedule 13.04.2009

arrow_upward
6
arrow_downward

То же самое для jQuery (на самом деле это было включено в подключаемый модуль Grails jQuery):

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

arrow_upward
2
arrow_downward

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

person Sven Lange    schedule 02.03.2011