2014-11-03 80 views
2

有人可以幫我解決如何更新我的視圖,並保留所有現有的ajax和will_paginate功能。使用will_paginate更新ajax內容

我有機管局網頁rehome.html.erb

<div id="options">Option Select Here</> 

<div class="all_animals"> 
    <%= render @animals %> 
</div> 

<% unless @animals.current_page == @animals.total_pages %> 
    <div id="infinite-scrolling"> 
    <%= will_paginate @animals %> 
    </div> 
<% end %> 

// WILL_PAGINATE 
<script type="text/javascript"> 
$(function(){ 

if($('#infinite-scrolling').size() > 0) { 
    $(window).on('scroll', function(){ 
    //Bail out right away if we're busy loading the next chunk 
    if(window.pagination_loading){ 
     return; 
    } 

    more_url = $('.pagination a.next_page').attr('href'); 

    if(more_url && $(window).scrollTop() > $(document).height() - $(window).height() - 50){ 
    //Make a note that we're busy loading the next chunk. 
    window.pagination_loading = true; 
    $('.pagination').text('Loading.....'); 
     $.getScript(more_url).always(function(){ 
      window.pagination_loading = false; 
     }); 
    } 
    }); 
} 
}); 
</script> 

這將加載所有@animals集合,它分頁到6每頁,當我向下滾動頁面,另外6加載等等等等

相應的控制器

class PublicController < ApplicationController 
before_filter :default_animal, only: [:rehome] 

def rehome 
    respond_to do |format| 
    format.html 
    format.js 
    end 
end 

private 

def default_animal 
@animals = Animal.animals_rehome.paginate(:page => params[:page], :per_page => 6) 
end 

end 

rehome.js.erb

$('.all_animals').append('<%= j render @animals %>'); 
<% if @animals.next_page %> 
    $('.pagination').replaceWith('<%= j will_paginate @animals %>'); 
<% else %> 
$(window).off('scroll'); 
$('.pagination').remove(); 
<% end %> 

所以,當一個選項是從AJAX柱子是創建一個新的查詢將返回@animals

$.ajax({ 
type: 'POST', 
url: '/public/rehomed', 
    data: data_send, 
    success: function(data) { 
    //console.log(data); 
    } 
}); 

控制器

def rehomed 
# conditions logic 
@animals = Animal.joins(:user).where(conditions).paginate(:page => params[:page], :per_page => 6) 

respond_to do |format| 
    format.js {render json: @animals } 
end 
end 

我想要什麼新的集合下拉選擇要做的是有新的集合加載(分頁到每頁6頁),當我向下滾動只顯示屬於@animals的新集合的對象(如果有的話)

目前分頁鏈接不更新,當我向下滾動原始集合加載

感謝

編輯

所以我創建了一個rehomed.js.erb文件,它幾乎是一樣的我的頁面rehome.js.erb

$('.all_animals').empty(); 
$('.all_animals').append('<%= j render @animals %>'); 
<% if @animals.next_page %> 
    $('.pagination').replaceWith('<%= j will_paginate @animals %>'); 
<% else %> 
    $(window).off('scroll'); 
    $('.pagination').remove(); 
<% end %> 

和我重新連接動作中

respond_to do |format| 
    format.js 
end 

所以動物的新的集合被加載,分頁鏈接被重新創建,但使用的重新連接的URL,例如是

之前

<a class="next_page" href="/public/rehome?page=2" rel="next">Next →</a> 

當我向下滾動後

<a class="next_page" href="/public/rehomed?page=2" rel="next">Next →</a>  

所以由於鏈接不存在且getScript失敗,我只得到以下內容

$('.pagination').text('Loading.....'); 

EDIT 2

我已經實現@ japed的答案,但新的集合呈現現在經過分頁將繼續呈現分貝的整個集合,包括重複的那些地方選擇了新的集合,它的重複本身

我如何確保爲我的鏈接生成正確的網址?

+0

我爲你的問題是什麼有點困惑。你只想在你的選擇或onchange事件綁定上點擊 – 2014-11-03 13:44:39

+0

@japed道歉,我已經更新了我的問題,這將有望進一步解釋事情 – Richlewis 2014-11-03 13:53:04

回答

2

將分頁允許您設置params哈希表,所以你應該能夠將其更改爲使用其他控制器的動作是這樣的:

will_paginate(@animals, :params => { :controller => "public", :action => "rehomed" }) 
+0

謝謝,這確實解決了我設置正確鏈接的問題,但是出於某種原因現在,一旦我到達結果的新集合的結尾,它將繼續執行,然後加載整個數據庫中剩下的所有記錄 – Richlewis 2014-11-03 15:42:55