jQuery Endless page with will_paginate not working in Rails

Question

I'm trying to implement the endless page functionality shown in Railscasts episode 114. The pagination works great but the endless page functionality doesn't trigger at all. I don't see any errors; just the pagination as if I didn't add the endless page javascript. My code:

activities controller

class ActivitiesController < ApplicationController
    before_filter :authenticate_user!
  def index
    @activities = PublicActivity::Activity.order("created_at DESC").where(owner_type: "User", owner_id: current_user.followed_users.map {|u| u.id}).page(params[:page]).per_page(15)
    @post = current_user.posts.build

     respond_to do |format|
      format.html
      format.json
      format.js 
    end
  end
end

activities.js.coffee

jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
        $('.pagination').text("Loading more activities...")
        $.getScript(url)
    $(window).scroll()

index.js.erb

$('#activities').append('<%= j render ('shared/activities') %>');
<% if @activities.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate('shared/activities') %>');
<% else %>
  $('.pagination').remove();
<% end %>
<% sleep 1 %>

shared/_activities.html.erb

<div class="activities">
<% @activities.each do |activity| %>
<code>
<% end %>
<%= will_paginate @activities %>
</div>

The issue must be with the javascript but I can't figure it out. Any ideas as to what could be causing the issue?

Thanks! -b

Answer 1

I managed to do it withOUT an "index.js.erb" file in Rails 4. Just add this coffeescript:

$(window).on 'scroll', ->
  if $('.pagination').length
    @url = $('.pagination .next_page').attr('href')
    if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
      $('.pagination').remove()
      $('#articles').append('<div>')
      $('#articles div').last().load @url+' #articles', ->
          if $('.next_page.disabled').length
            $('.pagination').remove()

This loads the next page then uses the pagination on the newly loaded page until there are no more next pages. Just replace "#articles" with the id of your container in the script. Skip the index.js.erb and respond_to jazz.

Answer 2

here are the relevant files from my code where I have endless page working with pagination. Hopefully you can figure out your specific solution from the below:

My index.js.erb file

 $('.carousel').append("<%= j render ('shared/recentlyadded') %>");
<% if @recently_added_video.next_page %>
  $('.pagination').replaceWith("<%= j will_paginate(@recently_added_video) %>");
<% else %>
  $('.pagination').remove();
<% end %>

My index.html.erb file

  <div class="carousel"><%= render partial: 'shared/recentlyadded' %></div>
  <%= will_paginate @recently_added_video %>

My _recentlyadded.html.erb file

 <ul class="jcarousel-skin-recent">
    <% @recently_added_video.each do |v| %>
      <li>
      <code>
      </li>
    <% end %> 
  </ul> 

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('.jcarousel-skin-recent').jcarousel({
            wrap:'both',
            animation:'slow'
        });
    });
</script>

My javascript file

jQuery ->

  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 225
        $('.pagination').text("...")
        $.getScript(url)
    $(window).scroll()