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

index.html.erb

Loading gist

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

user.rb

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.

_user.html.erb

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

user.js

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

users_controller.rb

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

index.js.erb

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.


4 Comments

___

981a7428b101cc6e42ad0a207d3fd610c6d2e4eb

Mateusz UrbaƄski

19 Jul 14

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

4dc14a7e002b3fb52f5327c3e3f2db0131475cef

Sreang Rathanak

31 Mar 16

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

4c35d12219df048e266766f1183b68a80e7aed6b

reach2seo

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?

C7a3bcb49bc16d0eb04521f08e4b3ee779122cc9

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.

Latest Tutorials

___

Private Inbox System in Rails with Mailboxer New

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...

Fast Autocomplete Search Terms - Rails

Introduction In many cases you find that you need to introduce a global search in your rails application i.e. search multiple models at a go using one form...

Load more scroll top