Trying to implement infinite scroll on Bloccit.

_posts.html.erb

<% @posts.each do |post| %>
<div class="media">
  <%= render partial: 'votes/voter', locals: { topic: @topic, post: post } %>
  <div class="media-body">
    <h4 class="media-heading">
      <%= link_to (markdown post.title), [@topic, post] %>
      <%= image_tag(post.image.thumb.url) if post.image? %>
      <br>
      <small>
        <%= image_tag(post.user.avatar.tiny.url) if post.user.avatar? %>
        submitted <%= time_ago_in_words(post.created_at) %> ago by 
        <%= post.user.name %><br/>
        <%= post.comments.count %> Comments
      </small>
    </h4>
  </div>
</div>
<% end %>

application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
//= require jquery.inview.min.js

jquery.inview.min.js

(function(d){var p={},e,a,h=document,i=window,f=h.documentElement,j=d.expando;d.event.special.inview={add:function(a){p[a.guid+"-"+this[j]]={data:a,$element:d(this)}},remove:function(a){try{delete p[a.guid+"-"+this[j]]}catch(d){}}};d(i).bind("scroll resize",function(){e=a=null});!f.addEventListener&&f.attachEvent&&f.attachEvent("onfocusin",function(){a=null});setInterval(function(){var k=d(),j,n=0;d.each(p,function(a,b){var c=b.data.selector,d=b.$element;k=k.add(c?d.find(c):d)});if(j=k.length){var b;
if(!(b=e)){var g={height:i.innerHeight,width:i.innerWidth};if(!g.height&&((b=h.compatMode)||!d.support.boxModel))b="CSS1Compat"===b?f:h.body,g={height:b.clientHeight,width:b.clientWidth};b=g}e=b;for(a=a||{top:i.pageYOffset||f.scrollTop||h.body.scrollTop,left:i.pageXOffset||f.scrollLeft||h.body.scrollLeft};n<j;n++)if(d.contains(f,k[n])){b=d(k[n]);var l=b.height(),m=b.width(),c=b.offset(),g=b.data("inview");if(!a||!e)break;c.top+l>a.top&&c.top<a.top+e.height&&c.left+m>a.left&&c.left<a.left+e.width?
(m=a.left>c.left?"right":a.left+e.width<c.left+m?"left":"both",l=a.top>c.top?"bottom":a.top+e.height<c.top+l?"top":"both",c=m+"-"+l,(!g||g!==c)&&b.data("inview",c).trigger("inview",[!0,m,l])):g&&b.data("inview",!1).trigger("inview",[!1])}}},250)})(jQuery);

post.rb

class Post < ActiveRecord::Base
  ...

  self.per_page = 5

  ...
end

show.html.erb

<h1><%= @topic.name %></h1>

<div class="row">
  <div class="span8">
    <p class="lead"><%= @topic.description %></p>
    <div class="posts">
    <%= render :partial => 'shared/posts', :locals => {topic: @topic, posts:  @posts } %>
    <%= link_to 'Load More Posts', topic_path(page: @posts.next_page), :class => 'load-more-posts', :remote => true if @posts.next_page %>
    </div>
    <%#= will_paginate @posts %>
  </div>
  <div class="span4">
    <% if can? :create, Post %>
      <%= link_to "New Post", new_topic_post_path(@topic), class: 'btn btn-large btn-block' %>
    <% end %>
    <br>
    <% if can? :update, @topic %>
      <%= link_to "Edit topic", edit_topic_path, class: 'btn btn-primary btn-mini' %>
    <% end %>
    <% if can? :delete, @topic %>
      <%= link_to "Delete Topic", @topic, method: :delete, class: 'btn btn-primary btn-mini btn-danger', confirm: "Are you sure you want to delete this topic?" %>
    <% end %>
  </div>
</div>

show.js.erb

var partial = '<%= escape_javascript(render partial: 'shared/posts', :locals => { topic: @topic, posts: @posts }) %>';
var path = '<%="#{topic_path page: @posts.next_page }".html_safe %>';

$('a.load-more-posts').before(partial);
$('a.load-more-posts').attr('href', path);
 
<% unless @posts.next_page %>
  $('a.load-more-posts').remove();
<% end %>

topics.js.coffee

$ ->
  $('a.load-more-posts').on 'inview', (e, visible) ->
    return unless visible
    
    $.getScript $(this).attr('href')

topics_controller.rb

# For infinite scroll, because posts are nested in topics, the topics show action would need to respond to JavaScript, right?
  def show
    @topic = Topic.find(params[:id])
    @posts = @topic.posts.paginate(page: params[:page])

    respond_to do |format|
      format.html # index.html.erb
      format.js
    end
  end