如何在特定页面上显示 Ajax 微调器？

Question

我在显示我的 ajax 微调器时遇到问题。现在我正在我的localhost:3000/test 上使用以下代码对此进行测试：

我单击一个链接以显示加载程序（Ruby on Rails 代码）：

<li><%= link_to "New Test", new_test_path, :remote => true %></li>

我有 div 加载器应该出现在里面：

<div id="generate-add-form">
  <div class="ajax-loader"></div>
</div>

然后我的功能让它出现：

jQuery( function($) {

$('#generate-add-form').ajaxStart( function() {
    $(this).children('.ajax-loader').show();
});

$('#generate-add-form').ajaxStop( function() {
    $(this).children('.ajax-loader').hide();
});

});

最后是我的 css（一些东西被注释掉，看看是否需要）：

.ajax-loader {
 display:    none;
 /*position:   fixed;*/
 z-index:    1000;
 /*top:        -13em;
 left:       6em;*/
 background:url('ajax-loader.gif') 50% 50% no-repeat;
}
body.loading {
 overflow: hidden;
}
body.loading .ajax-loader {
 display: block;
}

我点击链接后怎么没显示？

---

编辑：

<li><%= link_to "Test", new_test_path, :class => "add-link", :remote => true %></li>
<li><%= link_to "Study Guide", new_study_guide_path, :class => "add-link", :remote => true %></li>

$('#generate-add-form').children('.ajax-loader').hide();
  $('.add-link').click( function() {
    $('#generate-add-form').children('.ajax-loader').show();
});

我先隐藏微调器，然后在单击时再次显示它。切换到另一个链接时怎么办？

Answer 1

好的，首先，您要隐藏一些内容并显示您的 ajax 加载程序。首先，为您的链接提供一个 id 或一个唯一的类，以便您可以定位它：

<%= link_to "New Test", new_test_path, :remote => true, :id => 'you_link_id' %>

然后添加一些javascript来处理点击链接：

$('#your_link_id').click(function(){
  $('#generate-add-form').children('.ajax-loader').show();
  $('#id_of_the_stuff_you_want_to_hide').hide();
});

在将响应 new_test_path 的控制器操作中，在末尾添加：

respond_to do |format|
  format.js
end

在这里，您正在使您的控制器操作响应您的 javascript 请求（这就是远程所做的）。您还可以添加 format.html 来响应 html 请求。如果您还希望将页面提供给禁用 javascript 的用户（占所有用户的 1% 到 2%），您可能会希望这样做。

然后，使用名称 your_action.js.erb 创建您的视图。注意 js 而不是通常的 html。在里面，您可以隐藏您的 ajax 微调器并显示您想要的任何内容。您甚至可以渲染该页面中定义的部分。

$('#generate-add-form').children('.ajax-loader').hide();
$('#id_of_the_stuff_you_now_want_to_show').show();
$("#div_containing_your_partial").html('<%= escape_javascript(render 'name_of_your_partial') %>');

如果你愿意，克隆 this repository 我前段时间做的，它显示了如何做到这一点。

最后，当你完成这项工作时，你可能会想看看如何以更漂亮的方式显示和隐藏内容。例如，尝试使用 fadeIn 而不是 show 和 fadeOut 而不是 hide。

另外，最后一个细节。在 jQuery 中，函数不会按顺序调用。它们都被同时调用。因此，如果您想让某些东西仅在 某些东西消失之后出现，则必须使用回调。这是一个例子：

# without a callback, both actions take place at the same time
$("#id").hide();
$("#id2").show();

# with a callback, show will only be called after hide ends
$("#id").hide(function(){
  $("#id2").show();
});

编辑：要做你想做的事，你必须删除链接的:remote => true 部分，基本上编写 Rails 已经自动为你做的事情。使用这些链接来指导自己：

• http://www.alfajango.com/blog/rails-3-remote-links-and-forms/

• http://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery/

然后这可能就是你要找的：

• Get latest ajax request and abort others

但这一切都相当复杂，特别是对于 Railsbeginner ：/

Answer 2

尝试将height 设置为非零.ajax-loader。