我在显示我的Ajax微调器时遇到问题。现在,我正在localhost:3000/test使用以下代码对其进行测试:
localhost:3000/test
我单击一个链接以显示加载器(Ruby on Rails代码):
<li><%= link_to "New Test", new_test_path, :remote => true %></li>
我有div加载程序应该出现在里面:
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(); });
我先隐藏微调器,然后在单击时再次显示它。切换到另一个链接之间如何?
好的,首先,您想隐藏一些东西并显示您的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%),则可能需要这样做。
format.html
然后,使用名称创建视图your_action.js.erb。注意js,而不是通常的html。在内部,您可以隐藏ajax微调器并显示所需的内容。您甚至可以渲染该页面中定义的局部。
your_action.js.erb
$('#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已经为您自动完成的工作进行编程。使用以下链接指导自己:
:remote => true
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而言:/