Your endless-page.js file will look something like this:
var currentPage = 1;
var autoloading = false;
if( total_number_of_paginaion_pages > 1) {
autoloading = true;
}
function checkScroll() {
if (autoloading && nearBottomOfPage()) {
currentPage ++;
autoloading = false;
$.ajax( {
url: window.location,
data: 'page=' + currentPage,
beforeSend: function() {
$('.loading-info').show()
},
complete: function(){
$('.loading-info').hide()
},
success: function(data){
eval(data);
}
});
}
}
function nearBottomOfPage() {
return scrollDistanceFromBottom() < 150;
}
function scrollDistanceFromBottom(argument) {
return $(document).height() - ($(window).height() + $(window).scrollTop());
}
$(window).bind('scroll', function (){
checkScroll();
});
And in your file js.erb will look something like this.
$('.results-center').append('<%=escape_javascript(render :partial => '/search/search_result') %>');
if(! pagination_last_page) {
autoloading = true;
}
source
share