Как отображать анимированный значок во время обработки запроса Ajax - Rails 3

Я пытаюсь показать индикатор загрузки для каждого запроса ajax, я работаю в приложении rails 3.

HTML:

<div id="loading-indicator">
 <%= image_tag("loading.gif", :id => "loading-indicator", :style => "display:none") %>
</div>

CSS

#loading-indicator {
   position: absolute;
   left: 10px;
   top: 10px;
 }

loading.js:, который я разместил в assest/javascripts/

$(document).ready(function(){
    $(document).ajaxSend(function(event, request, settings) {
        $('#loading-indicator').show();
    });

    $(document).ajaxComplete(function(event, request, settings) {
        $('#loading-indicator').hide();
    });
});

My application.js выглядит так:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

Доцентная работа, ничего не появляется. Любая помощь будет оценена.

Ответы

Ответ 1

Обычно я сохраняю этот кусок кода в таких ситуациях:

$(function() {
  $('#loading-indicator')
    .hide()  // hide it initially.
    .ajaxStart(function() {
      $(this).show(); // show on any Ajax event.
    })
    .ajaxStop(function() {
      $(this).hide(); // hide it when it is done.
  });
});

--- EDIT ---

Это не будет работать с последними версиями jQuery. Начиная с jQuery 1.8, метод .ajaxStart() должен быть привязан только к document. Поэтому код должен выглядеть следующим образом:

$(function() {
  $('#loading-indicator').hide();  // hide it initially.
  $(document)  
    .ajaxStart(function() {
      $('#loading-indicator').show(); // show on any Ajax event.
    })
    .ajaxStop(function() {
      $('#loading-indicator').hide(); // hide it when it is done.
  });
});

Ответ 2

Вы технически не можете использовать один и тот же "id" дважды для двух разных элементов в одном документе. т.е. вы присваиваете id = "load-indicator" как тегам div, так и img; это может вызвать ошибки JS DOM и ошибки манипуляции.

Ответ 3

Проблема была в теге стиля css и позиции css

Я исправляю это, делая это:

HTML:

<div id="loading-indicator">
 <%= image_tag("loading.gif", :id => "loading-indicator") %>
</div>

CSS

#loading-indicator {
   left: 10px;
   top: 10px;
 }