Rails - Load More Results Using Jquery & Ajax

Rails - Load More Results Using Jquery & Ajax


In this tutorial, I will try and explain a very simple way on how to go about implementing a simple load more button which fetches for records using jquery, ajax in a rails application

Maybe you have seen how twitter's or facebook's style of loading older posts. They have a very nice technique of helping the user load older posts. We will try and create a similar functionality in a rails application. This tutorial assumes you have some basic knowledge with rails and jquery.

You can view a demo app made using this tutorial on heroku, and you can also clone it on github.

So, for this tutorial I have scaffolded a user model to get up fast and running and my index.html.erb looks like so


Loading gist

In my user.rb file I am fetching records with the latest record fetched first


Loading gist

Next, in my users partial, I pass in the id of each record and store it in a html5 data attribute called id.


Loading gist

I then use jquery to get the last id of the record and make an ajax request to the server with the last id


Loading gist

In my users controller's index action, I test whether the id param is present and if so query for records with id lower than the last id we sent with ajax and limit the results to 5


Loading gist

We now need a file to respond to the js format. With this we create a file called index.js.erb which renders the user partial with the @users results


Loading gist

And thats it! your good to go! This is all you need to do a simple load more with jquery and ajax. If you have any problems, check the source code and see if you can find any differences.



Mateusz UrbaƄski

19 Jul 14

In index action should be: @users = User.where('id > ?', params[:id]).limit(5) :)

Sreang Rathanak

31 Mar 16

How about field we order in not 'created_at', so what should we check in controller?


25 Jun 16

Do you have any idea how to get all the links given on doctors name for all? http://health.usnews.com/do... Because load more given so i can't able to access all links. Can anyone please provide solutions for load more?

Shawn Lindsey

02 Sep 16

This was great. My use case was a bit different but I got load more working. The feed for my sports betting and picks site CappedIn.com was working in about 2 hours! Excellent resource here.


12 Nov 17

Hi, this tutorial was really useful to me! How am i able to hide the 'load more' button if all users have been loaded? I have tried to tweak the user.js, but the 'load more' button disappears after i click it once. success: function () { $('.loading-gif').hide(); # i have limited in view to 3 users per load if (last_id -2 = 3){ $('.load-more').hide(); } else { $('.load-more').show(); } }

Latest Tutorials


How to download a file using Capybara and Poltergeist - Ruby New

In one of my recent projects, I was working on a scraper that needed to login into a website and download a file which I would then save to use later on. ...

Private Inbox System in Rails with Mailboxer

Introduction It's been quite a while since my last tutorial and since then I've recieved alot of requests by email to implement a private messaging system ...

Ajax Sortable Lists Rails 4

With me, is a simple to-do list application where users can create dummy to-do lists and displays them in card-like form just like in Trello. We want to e...

Managing ENV variables in Rails

Often when developing Rails applications, you will find a need to setup a couple of environment variables to store secure information such as passwords, a...

Gmail Like Chat Application in Ruby on Rails

Introduction We are all fond of the Gmail and Facebook inline chat modules. About a week ago, I came across a tutorial on how to replicate hangouts chat...

Load more scroll top