Question

In a Rails index view I’m implementing ajax pagination, more or less following this Railscast.

When a user clicks a pagination link, I want the following steps to occur:

1. Existing index fades out.
2. Spinner is displayed.
3. New index content fades in.

In index.js.erb I have the following content:

$(".ajaxable-content").fadeOut('fast');
$(".ajaxable-content").html('<div class="ajax-spinner></div>');
$(".ajaxable-content").delay(400);
$(".ajaxable-content").html('<%= escape_javascript(render :partial => "my/ajax/content" %>');
$(".ajaxable-content").fadeIn('slow');

Despite the delay function, what I’m seeing is:

1. New content is rendered.
2. Content fades out.
3. Content fades in.

This is not a very good user experience!

(in addition, the spinner doesn’t seem to be displayed. Or perhaps is being replaced too quickly to be noticeable).

What is the correct way to ensure the fade out completes before the new content is rendered?

What is the best way to set this up so that the request to the database is happening in the background whilst the fading and spinner are happening?

Answer 1

Any actions in index.js.erb will be performed when its contnent is already rendered and delivered to client side. So it can be resposible only for dispaying content (and hiding “loading” spinner).
Try to fadeOut current page and show the spinner before you send ajax request, something like (I’m using code from the screencast)

$(function () {
  $('#products th a').live('click', function () {
    var href = this.href;
    $(".ajaxable-content").fadeOut('fast', function(){
      $(".ajaxable-content").html('<div class="ajax-spinner></div>');
      $.getScript(href);
    });
    return false;
  });
})

And in index.js.erb left only last two lines

$(".ajaxable-content").html('<%= escape_javascript(render :partial => "my/ajax/content" %>');
$(".ajaxable-content").fadeIn('slow');

The spinner visibility also depend on you css: its parent div is hidden (faded out) when you show it.