will_paginate褪色的阿賈克斯

Question

我想在rails中調整我的will_pagniate分頁。我想有舊的頁面淡出，並在新的褪色

這裏是我的控制器的相關部分：

respond_to do |format| 
    format.html # new.html.erb 
    format.js { 
    render :update do |page| 
     page.replace 'page', :partial => 'cur_page' 
    end 
    } 
    format.xml { render :xml => @branch } 
end 

上述部分：

<div id="page"> 
    <%= will_paginate %> 
    <div id="posts"> 
    <%= render @posts %> 
    </div> 
    <%= will_paginate %> 
</div> 

及相關部分應用程序.js：

document.observe("dom:loaded", function() { 
    // the element in which we will observe all clicks and capture 
    // ones originating from pagination links 
    var container = $(document.body) 

    if (container) { 
    var img = new Image 
    img.src = '/images/spinner.gif' 

    function createSpinner() { 
     return new Element('img', { src: img.src, 'class': 'spinner' }) 
    } 

    container.observe('click', function(e) { 
     var el = e.element() 
     if (el.match('.pagination a')) { 
     el.up('.pagination').insert(createSpinner()) 
     target = $('posts') 
     new Effect.fade(target, { duration: 0.3, afterFinish: function() 
      { 
      new Ajax.Request(el.href, 
      { 
       method: 'get', 
       onSuccess: function(){ new Effect.Appear(target, {duration:0.3})} 
      }) 
     }}) 
     e.stop() 
     } 
    }) 
    } 
}) 

該腳本似乎在該行中被殺害，

 new Effect.fade(target, { duration: 0.3, afterFinish: function() 

，因爲我看到了spinner.gif開始，然後不褪色和頁面通常刷新。在嘗試添加Effect.Fade和Effect.Appear之前，我已經完成了ajax的工作。

這是正確的方式去做這件事嗎？我應該把效果放在控制器中嗎？

Answer 1

這裏是我做過什麼用jQuery，工作也很好:)

把你will_paginate助手視圖中調用一個div

#tickets_pagination 
    = will_paginate @tickets 

在application.js中

$("#tickets_pagination .pagination a").live("click", function() { 
    $.get("https://stackoverflow.com/users/?"+this.href.split("?")[1], null, null, "script"); 
    return false 
}); 

的JavaScript以上將把#tickets_pagination中的分頁鏈接轉換爲ajax鏈接

在您的控制器像往常一樣

def index 
    @tickets = Ticket.all.paginate({:page => params[:page], :per_page => 10 }) 
    respond_to do |format| 
    format.js 
    format.html 
    end 
end 

現在終於在index.js.erb的

$("#tickets_list_table").fadeOut('slow'); 
$("#tickets_list_table").html("<%= escape_javascript(render :partial =>'tickets/tickets_table', :locals => {:tickets => @tickets}) %>"); 
$("#tickets_list_table").fadeIn('slow'); 

這裏tickets/ticket_table具有列出所有門票一張桌子。部分呈現在div #ticket_list_table

希望這對你也有用。

Answer 2

對RoR不太熟悉，它是否會生成自己的客戶端JS，可能會與您的代碼作戰？

如果沒有，我會說這個問題在你自己的客戶端代碼中。要進行測試，請從錨標記中除去HREF屬性，並將該URL作爲字符串文字置於Ajax請求中。如果什麼都沒有發生，Ajax請求本身就有問題。如果頁面按預期加載，則原始場景中的事件未完全停止。

此外，清理你的JS有點確定，在需要的地方結束分號。

Answer 3

我試圖把更多的工作到JavaScript的助手：

respond_to do |format| 
    format.html # new.html.erb 
    format.js { 
    render :update do |page| 
     page.visual_effect :fade, 'posts', :afterFinsh => "function(){" + 
     page.replace 'page', :partial => 'cur_page' + 
     page.visual_effect(:appear, 'branches') + "}" 
    end 
    } 
    format.xml { render :xml => @branch } 
end 

然後取出的JavaScript的這一部分：

new Effect.fade(target, { duration: 0.3, afterFinish: function() 

我得到了我想要的效果，但全都失靈了。請求完成並且html被替換，然後 div淡出並重新出現！

Answer 4

你似乎混淆了一下。 您可以寫$('posts').fade或new Effect.fade('posts')。

其次，我似乎無法找到documentation中的afterFinish選項。

所以我建議沿着以下的說法：

container.observe('click', function(e) { 
    var el = e.element() 
    if (el.match('.pagination a')) { 
    el.up('.pagination').insert(createSpinner()) 
    target = $('posts') 
    new Effect.fade('posts', { duration: 0.3}); 
    setTimeout("new Ajax.Request(el.href, { method: 'get', 
      onSuccess: function(){ 
      new Effect.Appear('posts', {duration:0.3}) 
      } })", 1000); 
    e.stop(); 
    } 
}) 

希望這有助於。