I have a Listing#index page, which display 50 listings. I would like to have a button "More" that trigger javascript to query my MySql database for additional listings, then append to existing 50 listings without refreshing the page.
How should I go about this? I am using Rails and jQuery. I know Rails but new to Javascript.
Thank you very much for your help.
There are many ways to solve this problem.
1 You may render a "...js.erb" template which will perform some jquery code with append method (http://api.jquery.com/append/) or other manipulation logic. Do not forget to set :remote attribute to your button. I think this method will be easiest for you.
For example:
in controller:
def get_posts
@posts.all # or something you need
render "_get_posts.js.erb"
end
_get_posts.js.erb:
<% @posts.each do |post| %>
$('#posts').append("<%= post.title %>");
<% end %>
Also in js.erb you may render partial or do something you want.
2 Bind logic to click event of your button (http://api.jquery.com/click/), than send ajax query to server with a variety of ways (http://api.jquery.com/category/ajax/), than render data you have chosen (json, html, xml) and on client-side in callback function of ajax catch it and append to your page.
