Cum să controlați ordinea evenimentului în paginare ajaxificată?

Într-o vizualizare index Rails, implementez paginarea ajax, mai mult sau mai puțin urmând acest Railscast .

Când un utilizator face clic pe un link de paginare, vreau să apară următorii pași:

  1. Indicele existent se estompează.
  2. Se afișează Spinner.
  3. Conținutul noului index scade.

În index.js.erb am următorul conținut:

$(".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?

0

1 răspunsuri

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.

0
adăugat
perfect. Mulțumiri!
adăugat autor Andy Harvey, sursa
JavaScript, România - Moldova
JavaScript, România - Moldova
328 participanți

Comunitatea Română JavaScript: github.com/js-ro Pentru confort, opriți notificările. Parteneri: @node_ro, @php_ro, @python_ro, @seo_ro, @RomaniaGroup, @ai_ro, @Grupuri_IT Offtop: @holywars_ro Joburi: @js_jobs_ro Sponsored with ❤️ by ciupacabra.com