小编典典

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

ajax

我在显示我的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();
});

我先隐藏微调器,然后在单击时再次显示它。切换到另一个链接之间如何?


阅读 190

收藏
2020-07-26

共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已经为您自动完成的工作进行编程。使用以下链接指导自己:

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

2020-07-26