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

我试图为每个ajax请求显示一个加载指示器，我在rails 3应用程序中工作

HTML:

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

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

加载.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如下所示：

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

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

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

---

它不起作用，什么也没出现。任何帮助都将不胜感激。

我通常会将这段代码保存到以下情况：

$(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（）

方法只能附加到

文档

。因此，代码应如下所示：

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

---

问题在于css样式标记和css位置

我通过这样做来修复它：

HTML:

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

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

---

从技术上讲，不能对同一文档中的两个不同元素使用相同的“id”两次。i、 e.您正在为div和img标签分配id=“加载指示器”；这可能会导致JS DOM选择和操作错误。

首先，我会查看JS错误控制台，看看是否有任何错误！另外，通过执行生成的文件的标题，再次检查loading.js是否正确加载HTML@AnthonyAlberto它是正确加载的，我没有在FireBug中得到错误。它是get还是POST？另外，您要将哪种类型的html元素（即按钮、输入等）作为ajaxify？rails UJS文件集取决于html的类别element@stephenmurdoch这是一个元素，请检查我前面的问题：bit.ly/or8agtc是否可以用警报替换显示和隐藏调用，以确保功能得到执行？很快，它就不起作用了。-也许我需要增加一些持续时间？它装载到快速？奇怪。这个例子在所有情况下都是完美的。检查语法错误、标识等，并检查浏览器错误日志。=]检查我前面的问题：，脚本是否也响应click事件？它只有在发出Ajax请求时才起作用。例：向服务器发送帖子、获取、放置、删除。这不适用于只处理一些随机DOM的单击事件。但是如果仔细检查这个问题，这个过程就是ajax调用。