如何控制ajaxified分頁中的事件順序？

Question

在Rails索引視圖中，我正在執行ajax分頁，或多或少地遵循此Railscast。

當用戶點擊一個鏈接分頁，我想會發生以下步驟：

1. 現有指數淡出。
2. 顯示微調器。
3. 新的內容編制索引淡入

在index.js.erb的，我有以下內容：

$(".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'); 

儘管delay功能，我所看到的是：

1. 呈現新內容。
2. 內容淡出。
3. 內容變淡英寸

這是不是一個很好的用戶體驗！

（此外，微調似乎沒有顯示，或者可能正在被快速替換以顯着）。

在新內容呈現之前，確保淡出完成的正確方法是什麼？

什麼是最好的方式來設置這樣的數據庫的請求發生在後臺，而衰落和微調正在發生？

Answer 1

index.js.erb中的任何操作都將在其contnent已經呈現並傳遞到客戶端時執行。所以它只能用於顯示內容（並隱藏「加載」微調器）。 嘗試淡出當前頁面，並顯示微調您發送Ajax請求，像（我使用從截屏代碼）

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

而且在index.js.erb的只剩最後兩行之前

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

微調器的可見性也取決於你的CSS：它的父div被隱藏（淡出），當你顯示它。