Mastering Infinite Scroll in Ruby on Rails: A Developer’s Journey

Recently I needed to implement infinite scroll to an index page in a Rails project I was working upon. It appeared to be quite straightforward using jquery Ajax. The first thing that needs to be done is to get clarity of how to implement it. So here are the steps that I followed to achieve this feature. 

First thing first, I’m using Rails 6.1.4 and JQuery 3.6.3 in this project. I know these are not the latest versions but guess what, it works. 🙂 The “will_paginate” gem is already integrated in this application for the pagination purpose so my target was to tweak the gem’s use in favor of the infinite scrolling. 🤔 If you are not familiar with “will_paginate” gem, you can read about it here https://github.com/mislav/will_paginate#readme. So let’s just dive into the code. 🏊

application.js

//= require infinite_scroll

app/assets/javascripts/infinite_scroll.js

$(document).ready(function() {
let scrollableElement = $(“#infinite-scroll-container”);
loadRecordOnScrolling(scrollableElement);
})
function loadRecordOnScrolling(scrollableElement) {
$(scrollableElement).on(“scroll”, function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(“#infinite-scroll-table”).height()) {
$(this).off(“scroll”);
let indexUrl = window.location.href;
let nextPage = $(“#index-table-body”).data(“next-page”);
if (nextPage) {
$.ajax({
method: “GET”,
url: indexUrl,
data: { page: nextPage },
dataType: “script”
});
}
}
});
}

Here we have created a function which takes the scrollable body’s parent element as the argument. When the scrolling event gets triggered we need to check if the user has reached to the bottom of the page or nearly bottom of the page, that’s when we fire the ajax call to fetch more data. Also we must unbind the scroll event immediately reaching to the bottom of the page otherwise unwanted bugs/glitches will appear. And the reason for that is if we don’t unbind the event the condition will be fulfilled for both bottom and nearly bottom. The “next-page” is the value of the next page number which we are getting from the “will_paginate” gem. This value is necessary to fetch the next page’s records.

app/views/documents/index.js.erb

$(“#index-table-body”).data(“next-page”, “<%= @documents.next_page %>”);
$(‘#index-table-body’).append(‘<%= escape_javascript(render(“document”, documents: @documents)) %>’);
loadRecordOnScrolling($(“#infinite-scroll-container”));

Next we need to change the value of the “next-page” so that next time we can get the records from next to next page. And we have to append the currently fetched records to the bottom of the page. Call the function again as we have to bind the scroll event again which we removed to save ourselves from some bad glitches. 😉

And Tada! 🎉

You have successfully implemented the infinite scroll to your Rails application without using turbolink. 

Thank you for taking the time to read this blog. Bishal Mukherjee has been working as a Ruby on Rails (RoR) developer for more than 2 years. He has been actively involved in the development of various web applications using Ruby on Rails.