Infinite Scroll with Kaminari doesn't do anything

Question

Using https://github.com/amatsuda/kaminari/wiki/How-To%3a-Create-Infinite-Scrolling-with-jQuery as a guide I have tailored the code according to my specific case but nothing happens or changes in my app. The pagination with kaminari works just fine but the infinite scrolling is completely absent. Having my partials adding the extra layers of abstraction is really confusing me.

micropost_controller.rb

def index
  @micropost  = current_user.microposts.build
  @microposts = Micropost.order(:created_at).page(params[:page])
end

view for micropost index.html.erb

<%= render 'shared/public_feed' %>

shared/_public_feed.html.erb

<div id="posts">
<% if @microposts.any? %>
  <ol class="page">
    <%= render partial: 'shared/feed_item', collection: @microposts %>
  </ol>
<% end %>

<%= paginate @microposts, :theme => 'twitter-bootstrap', :pagination_class => "pagination-sm" %>
</div>

shared/_feed_item.html.erb

<div class="post">
<li id="<%= feed_item.id %>">
    <%= link_to gravatar_for(feed_item.user), feed_item.user %>
    <span class="user">
      <%= link_to feed_item.user.name, feed_item.user %>
    </span>
    <span class="content">
      <%= feed_item.content %>
    </span>
    <span class="timestamp">
      Posted <%= time_ago_in_words(feed_item.created_at) %> ago.
    </span>
  <% if current_user?(feed_item.user) %>
    <%= link_to "delete", feed_item, method: :delete,
                                     data: { confirm: "You sure?" },
                                     title: feed_item.content %>
  <% end %>
</li>
</div>

views/microposts/index.js.erb

$("#posts").append("<ol class='page'><%= escape_javascript(render('shared/feed_item')) %></ol>");

microposts.js.coffee

$(document).ready ->
  $("#microposts .page").infinitescroll
    navSelector: "nav.pagination" # selector for the paged navigation (it will be hidden)
    nextSelector: "nav.pagination a[rel=next]" # selector for the NEXT link (to page 2)
    itemSelector: "#posts div.post" # selector for all items you'll retrieve

UPDATE CODE I changed some of the classes/ids around to try and fit better with the tutorial but still no luck. Also, according to my rails console my index.js.erb isn't being rendered

  Rendered shared/_feed_item.html.erb (595.7ms)
  (1.4ms)  SELECT COUNT(*) FROM "microposts"
  Rendered shared/_public_feed.html.erb (1140.4ms)
  Rendered microposts/index.html.erb within layouts/application (1210.7ms)
  Rendered layouts/_shim.html.erb (0.1ms)
  Rendered layouts/_header.html.erb (1.1ms)
  Rendered layouts/_footer.html.erb (0.3ms)

However when I navigate to http://localhost:3000/microposts.js I get this error in my feed_item partial

undefined local variable or method `feed_item' for #<#<Class:0xb998f134>:0xb9cd7198>

but if I replace 'shared/feed_item' with @microposts in the index.js.erb file I get a bunch of plain text so I assume it didn't run into any errors with the javascript.

update 2: according to this github issue index.js.erb isn't even used.. now I'm really confused https://github.com/amatsuda/kaminari/issues/440

update 3 I created a new app and followed the instructions exactly but removed the index.js.erb file and the demo app still functioned like it was supposed to. So the problem I'm having must be in my coffeescript but I'm not getting any errors in my javascript log when I run it.

update 4 so after installing the demo app from the guide I changed the <table> and <tr> elements to <div> elements and infinite scroll stopped working. In order to get it to load work i had to resize the window smaller and then scroll down in order to trigger the event. Not sure how this applies yet to my specific issue.

Answer 1

When using a theme for your pagination with kaminari, specifically the twitter bootstrap theme, it changes the nav tag to a div tag. In order to get the code to work I had to change the nav.pagination selector in the coffeescrip file to div.pagination.