Skip to content

Instantly share code, notes, and snippets.

@zackbraksa
Created May 19, 2013 00:16
Show Gist options
  • Save zackbraksa/5606187 to your computer and use it in GitHub Desktop.
Save zackbraksa/5606187 to your computer and use it in GitHub Desktop.
class CommunitiesController < ApplicationController
# ...
def show
@community = Community.find(params[:id])
@users = @community.users
@ressources = Ressource.paginate(:page => params[:page], :per_page => 5)
end
# ...
end
var currentPage = 1;
var intervalID = -1000;
function checkScroll() {
if (nearBottomOfPage()) {
currentPage++;
console.log("endless request "+ currentPage);
jQuery.ajax('?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get', success: function(data, textStatus, jqXHR) {
$('.ressources').append(jQuery(data).find('.ressources').html());
if(typeof jQuery(data).find('.ressources').html() == 'undefined' || jQuery(data).find('.ressources').html().trim().length == 0){
clearInterval(intervalID);
}
},});
}
}
function nearBottomOfPage() {
return scrollDistanceFromBottom() < 50;
}
function scrollDistanceFromBottom(argument) {
return pageHeight() - (window.pageYOffset + self.innerHeight);
}
function pageHeight() {
return Math.max(document.body.scrollHeight, document.body.offsetHeight);
}
$('document').ready(function(){
intervalID = setInterval(checkScroll, 250);
})
<div class="row">
<div class="span12">
<div class="box">
<h1>Board</h1>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div class="ressources">
<%= render :partial => 'ressource', :collection => @ressources %>
</div>
</div>
</div>
@ericpeters0n
Copy link

The partial would've been handy, but thanks!

@akcrono
Copy link

akcrono commented Oct 13, 2014

Finally found an infinite scroll that worked. Thank you!

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