Begin with ajax and jquery combined with rails, I am trying to create a "load more" link in the bottom of my user index page. My user index page should display the 10 first users, then clicking the link it loads the next 10 users on the bottom of the user div, etc.. I use Kaminari for pagination.
I started with the following code:
def index
@users = User.page(params[:page]).per(10)
end
<div id="users">
<%= render :partial => @users %>
</div>
<%= link_to "Load more", "#", :class => "next" %>
<div id="box">
<%= link_to full_name(user), user %>
</div>
I found this snippet (credit: here) trying to fit it with my need:
function loadMore(pageNo) {
var url = '/users?page=';
$.get(url + pageNo, function(response) {
$("#users").append(response);
});
}
$(document).ready(function() {
var currPage = 1;
$("a.next").click(function() {
loadMore(++currPage);
});
});
I works perfectly except it loads all the page layout with the next results not only the box div in my _user partial How can I manage this? Did I have to create an index.js.erb (something like: page.insert_html :bottom, :users, :partial => @users but in jquery, if so how can I do it)?
Thanks for your help
You should create an own action for this, associated with it's own view. Then, be sure to disable rendering of the layout:
def more_users
@users = User.page(params[:page]).per(10)
render :layout => false
end