Endless Page

01.coffee

jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
        $('.pagination').text("Fetching more posts...")
        $.getScript(url)
    $(window).scroll()

# /app/assets/javascripts/posts.js.coffee

02.erb

<%= post.body %><br />

<!-- /app/views/posts/_post.html.erb -->

03.erb

<h1>Listing posts</h1>

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

<%= will_paginate(@posts)%>

<!-- /app/views/posts/index.html.erb -->

04.js

$('#posts').append('<%= j render(@posts) %>');
<% if @posts.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@posts) %>');
<% else %>
  $('.pagination').remove();
<% end %>

// /app/views/index.js.erb