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

我有问题显示我的ajax微调器。 现在我在我的localhost:3000/test使用以下代码localhost:3000/test ：

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

 
 true %> 

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

然后我的function使它出现：

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

为什么我点击它没有显示的链接？

---

编辑：

 
 "add-link", :remote => true %>
 
 "add-link", :remote => true %>
 $('#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/

然后这可能是你正在寻找的：

• 获取最新的ajax请求并中止其他人

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

Answer 2

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