Why not to use plugins
There are so many plugins which provides the functionality of loading content while scroll to the bottom but you can’t depend on the plugins because they are limited to some extent.
When to code for this kind of stuff
As plugins are limited to some extent but may be your requirement demands more than a plugin can provide the you need to code by your own.
What this code will do it will load content while scroll to the bottom for three times and then it will append a button to load all which will load rest of the content.
###Setting up div where the scrolling js would apply
<div class="row sheets_container">
<%= render partial: 'sheets/sheet', collection: @sheets, locals: { project: @project } %>
<%= paginate @sheets, params: { format: :js } %>
</div>
<div class="load_all text-right form-group">
</div>I wrote a js file for scrolling to the bottom and loading content.
scroll_sheet.js
function scroll_sheet(total_sheets, load_all_sheets_url) {
jQuery.ajaxSetup({async:false});
var scroll_counter = 0;
if (total_sheets > $('.sheet-block').size()) { // Here $('.sheet-block').size() is a class where the content are paginated
$(window).scroll(function (e) {
if (scroll_counter < 3) {
if (($(window).scrollTop() + $(window).height()) > ($(document).height() - 2)) {
setTimeout(function(){
var url = $($('.pagination .page a')[scroll_counter]).attr('href');
scroll_counter ++;
if (typeof(url) != 'undefined') {
$.get(url);
}
}, 300);
}
} else {
$(window).unbind('scroll');
if (total_sheets > $('.sheet-block').size()) {
$('.load_all').append('<a class="btn btn-default btn-lg load_all_content" href="javascript:void(0)">Load all sheets</a>').click(function () {
$.get(load_all_sheets_url, {
sheet_token: $('.sheets_container img:last').attr('sheet_token'),
success: function () {
$('.load_all_content').remove();
}
});
});
}
}
});
}
}###controller
This is your controller’s action where you are fetching the sheets for each scroll.
def show
@sheets = @project.sheets.page(params[:page]).per(8)
endThis is the action where you need to load rest of the content.
def load_balance_sheets
if @sheet = @project.sheets.where(token: params[:sheet_token]).take
@sheets = @project.sheets.where(id: (@sheet.id + 1)..Float::INFINITY)
render :action => 'show'
else
render :js => "alert('Unable to fetch sheets.');"
end
endIf you need to made this js available throughout the application then you need to do this:
application.js
// require scroll_sheetNow I am calling this function from the page where I need to load my content on scroll to the bottom.
scroll_sheet(<%#= project.sheets.count %>, '<%#= load_balance_sheets_project_path format: :js %>');Thank you for reading this blog.