AJAX w/ rails 并使用 ajaxStart 和 ajaxStop答案

【问题标题】：AJAX w/ rails and using ajaxStart and ajaxStopAJAX w/ rails 并使用 ajaxStart 和 ajaxStop
【发布时间】：2012-01-03 01:59:50
【问题描述】：

我正在使用 rails 来处理在我的主页上的菜单选项卡之间进行更改的 ajax 请求。我尝试添加一个新函数来隐藏和显示 ajax 微调器，具体取决于何时调用 ajaxStart 和 ajaxStop，我似乎无法让它工作。如果这是因为我通过 Rails 进行 ajax 调用并如下所示？我怎样才能做到这一点？非常感谢您的帮助。

application.js

$(function() {
  $('#loading').ajaxStart(function() {
    $(this).show();
  }).ajaxComplete(function() {
    $(this).hide();
  });
});

用户控制器

def bookmarks
 @bookmarks = ...
 respond_with @bookmarks
end

视图/用户/bookmarks.js.erb

$('#stream').html('<%= escape_javascript(render("posts", :posts => @bookmarks)) %>');

布局

<body>
...
<div id="loading">
  <p><img src="images/ajax-loader.gif" /> Please Wait</p>
</div>
</body>

css

#loading { 
     display:none;
     position:fixed;
     left:0;
     top:0;
     width:100%;
     height:100%;
     background:black;
 }

【问题讨论】：

标签： jquery ruby-on-rails-3

【解决方案1】：

我从未使用过 Rails，所以我不明白/看不到您的 ajax 调用发生在哪里。也就是说，您的 ajaxStart 和 ajaxComplete 语法对我来说看起来不错。

这是一个使用 jQuery 的典型 ajax 函数的工作示例（如果您希望 ajaxStart 和 ajaxComplete 工作，我假设 rails 正在使用该函数。

JSFiddle：

http://jsfiddle.net/MNd5h/1/

HTML

<div id="loading">
  <p>Please Wait</p>
</div>

JavaScript

$("#loading").ajaxStart(function() {
    $(this).show();
}).ajaxComplete(function() {
    var $loading = $(this); 
    setTimeout(function(){
        $loading.hide();
    },1000); //Timeout so you can see the loading happen
});

$.ajax({
    url: "/echo/json/"
});

CSS

#loading { 
     display:none;
     position:fixed;
     left:0;
     top:0;
     width:100%;
     height:100%;
 }

【讨论】：