- ウィンドウ下部までスクロールしたら発火するイベントをつくる。ただし、今回の例では何度も発火していることがある。そのイベントで何をするかが腕のみせどころ。
- link_to_next_page に次へのポインタ的な情報をセットして、コンテンツを更新したらこれも更新
-
$('#next_link').trigger("click"); するより $ .ajax の方が HTML を組み立てやすい気がするが success でとれる情報の操作がいる。そのままだと layout 外しても豪快にとれる。 - $(window) などの window を任意のエレメントにできるようにした方がよい
def index
@users = User.page(params[:page]).per(50)
end
<h1>ユーザ一覧</h1>
<ul>
<div id="contents">
<%= render @users %>
</div>
</ul>
<div id="next">
<%= link_to_next_page @users, '次へ', :remote => true, :id => 'next_link' %>
</div>
<li><%= user.name %></li>
var prev = $('#contents').html();
$('#contents').html(prev + '<%= escape_javascript render(@users) %>');
$('#next').html(
'<%= escape_javascript(link_to_next_page(@users, '次へ', :remote => true, :id => "next_link").to_s) %>'
);
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
$('#next_link').trigger("click");
}
});