如何在特定页面上显示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') %>');

如果需要，请克隆我之前创建的该存储库，其中显示了如何执行此操作。

最后，当您开始工作时，您可能想要研究以更漂亮的方式显示和隐藏内容的方法。例如，尝试使用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/

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