Question

我正在使用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;
 }

Answer 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%;
 }

AJAX w / rails并使用ajaxStart和ajaxStop

的application.js

用户控制器

查看/用户/ bookmarks.js.erb

布局

CSS

1 个答案: