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 loa

Answer 1

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

Answer 2

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