2

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

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

4

2 回答 2

4

Ok, so first, you want to hide something and show your ajax loader. First, give an id or an unique class to your link so you can target it:

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

Then add some javascript to handle the click on the link:

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

In the controller action that will respond to new_test_path, add this at the end:

respond_to do |format|
  format.js
end

Here, you are making your controller action respond to your javascript request (that's what remote does). You could also add format.html to respond to html requests. You'll probably want to do this if you also want serve your page to people with javascript disabled (1 to 2% of all users).

Then, create your view with the name your_action.js.erb. Notice the js instead of the usual html. Inside, you can then hide your ajax spinner and show whatever you want. You can even render partials defined in that page.

$('#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') %>');

If you want, clone this repository I made some time ago that shows just how to do this.

And finally, when you get this working, you'll probably want to look at ways to make showing and hiding stuff in a prettier way. Try using fadeIn instead of show and fadeOut instead of hide for example.

Also, one final detail. In jQuery, functions don't get called sequentially. They are all called at the same time. So if you want to make something appear only after something disappears, you have to use of callbacks. Here's an example:

# 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();
});

EDIT: To do what you want, you have to remove the :remote => true part of your link and basically program what Rails already does automatically for you. Use these links to guide yourself:

And then this is probably what you're looking for:

But this is all rather complicated, specially for a Railsbeginner :/

于 2012-06-16T15:57:28.027 回答
1

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

于 2012-06-16T12:33:55.630 回答