ruby-on-rails - 如何在 Ajax 请求处理期间显示动画图标 - Rails 3

Question

我正在尝试为每个 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();
    });
});

我的 application.js 看起来像这样：

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

它不起作用，没有任何显示。任何帮助，将不胜感激。

Answer 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.
  });
});

- - 编辑 - -

这不适用于最新版本的 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.
  });
});

Answer 2

从技术上讲，您不能对同一文档中的两个不同元素使用相同的“id”两次。即您将 id="loading-indicator" 分配给 div 和 img 标签；这可能会导致 JS DOM 选择和操作错误。

Answer 3

问题出在 css 样式标签和 css 位置

我通过这样做来修复它：

HTML：

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

CSS：

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