Rails Endless Page / Infinite Scroll

Question

I use twitter bootstrap and will_paginate, and I have a table on which I would like to implement infinite scrolling.

This table is a fixed length and already scrolls. I recently switched to a revised version of Railscasts Episode No. 114, but that didn't work for me. When I go to the bottom of the table, he says that he is getting more articles, but actually he is not getting more articles.

Here is my code:

Articles.js.coffee:

jQuery -> if $('.pagination').length $(articles).scroll -> url = $('.pagination .next_page').attr('href') if url && $(articles).scrollTop() > $(document).height() - $(articles).height() + 585 $('.pagination').text('Fetching more players...') $.getScript(url) $(articles).scroll() 

Index.js.erb:

 $('#articles').append('<%= j render(@articles) %>'); <% if @articles.next_page %> $('.pagination').replaceWith('<%= j will_paginate(@articles) %>'); <% else %> $('.pagination').remove(); <% end %> 

My controller and table are called articles. I do not know if it works because it is a table against the whole page.

Please let me know if I need to post more files.

Answer 1

I figured this out by following episode 114 of the railscasts, but I had to make some changes to make it work.

Here is my new code:

articles.js.coffee

 jQuery -> if $('.pagination').length $('#articles_table').scroll -> url = $('.pagination .next_page').attr('href') if url && $('#articles_table')[0].scrollHeight - $('#articles_table').scrollTop() < 700 $('.pagination').text('Fetching more users...') $.getScript(url) $('#articles_table').scroll() 

index.html.erb

 <table class="table table-striped table-bordered span8 table-condensed" id="articles_table" > <thead class="header"> <tr> <th>ID</th> <th>Title</th> <th>Description</th> <th>Created_At</th> </tr> </thead> <tbody> <%= render @articles %> </tbody> 

index.js.erb

 $('#articles_table').append('<%= j render(@articles) %>'); <% if @articles.next_page %> $('.pagination').replaceWith('<%= j will_paginate(@articles) %>'); <% else %> $('.pagination').remove(); <% end %> 

_article.html.erb

 <tr> <td> <%= article_counter +1 %> </td> <td> <%= article.Title %> </td> <td> <%= article.Description %> </td> <td> <%= article.Created_At %> </td> </tr> 

I just had to change a bit around javascript to make it work for me and then create a partial one. The changes in javascript were due to the fact that I used a fixed-length table not the entire page.