有人可以幫我解決如何更新我的視圖,並保留所有現有的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的答案,但新的集合呈現現在經過分頁將繼續呈現分貝的整個集合,包括重複的那些地方選擇了新的集合,它的重複本身
我如何確保爲我的鏈接生成正確的網址?
我爲你的問題是什麼有點困惑。你只想在你的選擇或onchange事件綁定上點擊 – 2014-11-03 13:44:39
@japed道歉,我已經更新了我的問題,這將有望進一步解釋事情 – Richlewis 2014-11-03 13:53:04