How to have Ajax spinner show on specific page?

Question

I'm having issues showing my ajax spinner. Right now I am testing this on my localhost:3000/test with the following code:

I click a link to get the loader to show (Ruby on Rails code):

<li><%= link_to "New Test", new_test_path, :remote => true %></li>

I have the div the loader should appear inside:

<div id="generate-add-form">
  <div class="ajax-loader"></div>
</div>

Then my functions to make it appear:

jQuery( function($) {

$('#generate-add-form').ajaxStart( function() {
    $(this).children('.ajax-loader').show();
});

$('#generate-add-form').ajaxStop( function() {
    $(this).children('.ajax-loader').hide();
});

});

Last is my css (some stuff commented out to see if its needed or not):

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

How come when I click the link it doesn't show?

---

EDIT:

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

I hide the spinner first and then show it again on click. What about in between when switching to another link?

Answer 1

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:

• 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/

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

• Get latest ajax request and abort others

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

Answer 2

Try to set non-zero height for .ajax-loader.