現在、次のような無限のページング設定があります。
events_controller.rb
class EventsController < ApplicationController
respond_to :html, :js
def index
@events = Event.page(params[:page]).per(5)
respond_with(@events)
end
end
イベント/index.html.erb
<div id="events-container">
<%= render :partial => 'events', :locals => {events: @events} %>
</div>
イベント/events.html.erb
<div id="events-table-container" data-events-url="<%= current_url %>">
<table id="events-tbl">
<tbody id="events-tbl-body">
<%= render events %>
</tbody>
</table>
<%= paginate events %>
</div>
assets/javascripts/events/events_endless_paging.js
$(function() {
var isScrolledIntoView;
isScrolledIntoView = function(elem) {
var docViewBottom, docViewTop, elemBottom, elemTop;
docViewTop = $(window).scrollTop();
docViewBottom = docViewTop + $(window).height();
elemTop = $(elem).offset().top;
elemBottom = elemTop + $(elem).height();
return (elemTop >= docViewTop) && (elemTop <= docViewBottom);
};
if ($('#events-container .pagination').length) {
$(window).scroll(function() {
var url;
url = $('#events-container .pagination .next a').attr('href');
if (url && isScrolledIntoView('#events-container .pagination')) {
$('#events-container .pagination').html("<span class='working-notice'>Fetching more...</span>")
return $.getScript(url);
}
});
return $(window).scroll();
}
});
イベント/index.js.erb
$('#events-tbl-body').append('<%= j render(@events) %>');
<% if (@events.current_page < @events.num_pages) %>
$('.pagination').replaceWith('<%= j paginate(@events) %>');
<% else %>
$('.pagination').remove();
<% end %>
これは魅力のように機能します。この問題は、setTimeout ajax ポーリングを統合してイベント ページを更新しようとすると発生します。
assets/javascripts/events/event_poller.js
$(document).on('ready', function() {
App.Pollers.Event.poll();
});
App.Pollers.Event = {
frequency: 170000,
poll: function() {
setTimeout(App.Pollers.Event.request, App.Pollers.Event.frequency);
},
request: function() {
eventsRequest = $.getScript($('#events-table-container').data('events-url'));
return eventsRequest;
},
};
上記のエンドレス ページング コードを削除すると、events/index.js.erb 内のコードは次のようになり、更新動作だけが適切に機能します。
イベント/index.js.erb
$('#events-container').html('<%= j(render :partial => 'events', :locals => {events: @events}, :formats => :html) %>');
App.Pollers.Event.poll();
私の課題は、エンドレス ページング コードと ajax リフレッシュ コードを連携させることです。エンドレス ページング コードで ajax リフレッシュを使用すると、最終的に発生するのは、 events-tbl-body要素に重複したイベントが追加されることです。もう 1 つの問題は、ユーザーがページを下にスクロールし、エンドレス ページングによってページ 2 の結果がページ 1 の結果に追加されたとします。この場合、ajax 更新コードはページ 1 と 2 の両方を表示する方法をどのように知るのでしょうか? これらは課題のほんの一部です。誰かがガイダンスを提供できることを願っています。これは冗長な質問であることは承知していますので、ご注意ください。