Skip to content

Instantly share code, notes, and snippets.

@ryanb
Created December 16, 2011 23:22
Show Gist options
  • Star 36 You must be signed in to star a gist
  • Fork 13 You must be signed in to fork a gist
  • Save ryanb/1488487 to your computer and use it in GitHub Desktop.
Save ryanb/1488487 to your computer and use it in GitHub Desktop.
Infinite scrolling solution covered in revised episode #114: http://railscasts.com/episodes/114-endless-page-revised
$('#products').append('<%= j render(@products) %>');
<% if @products.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@products) %>');
<% else %>
$('.pagination').remove();
<% end %>
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 products...")
$.getScript(url)
$(window).scroll()
@ryanb
Copy link
Author

ryanb commented Dec 16, 2011

This assumes you have existing pagination already in place. See Episode 114: Endless Page (revised) for a walkthrough on how this works.

@jnx
Copy link

jnx commented Dec 17, 2011

Nice :)

@toamitkumar
Copy link

bingo !!!

@czj
Copy link

czj commented Dec 18, 2011

Very compact, very nice !

@richardsondx
Copy link

I've been having some issues with this as i am loosing all the style of my posts when I try to do endless pages. How would you do the same thing while using a partial and <%= render 'micro posts' %> instead of <%= render @microposts %> ??

Here is my code I haven't been able to fix this issue:

https://gist.github.com/2305229

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment