Question

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

That table is a fixed length and already scrolls. I recently followed the revised version of Railscasts Episode #114, but it does not work for me. When I scroll to the bottom of the table, it says fetching more articles, but it does not actually fetch 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 both called Articles. I do not know if it is not working because it is a table versus a whole page.

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

Answer 1

I figured it out by following the railscasts episode 114 but I had to make some changes in order 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 around the javascript a little bit to make it work for me and then create a partial. The javascript changes were because I was using a fixed length table not the whole page.