CODEWITHSUNDEEP
javascriptruby-on-railspagination
Tony
Tony

Reputation: 1011

Implementing 'Endless Page' Javascript following railscast 114

I have a simple Twitter mockup set up following rails tutorial and I'm trying to add Endless Page following this: http://railscasts.com/episodes/114-endless-page

Ryan used a products page and index. However, I have a newsfeed going and so certain variables will need to be replaced.

I've replaced @products with @feed_items but with no luck. It seems so simple to implement so I'm not sure what I'm doing wrong.

Code Comparison:

Here is my pages controller which would be Ryan's Product controller

class PagesController < ApplicationController

  def home
    @title = "Home"
    if signed_in?
      @micropost = Micropost.new
      @feed_items = current_user.feed.paginate(:page => params[:page])
    end
  end

Ryan's Code:

def index
  @products = Product.paginate(:page => params[:page], :per_page => 15)
end

My index.js.rjs (Problem may lie here?)

page.insert_html :bottom, :feed_item, :partial => @feed_items
if @feed_items.total_pages > @feed_items.current_page
  page.call 'checkScroll'
else
  page[:loading].hide
end

Ryan's Code

page.insert_html :bottom, :products, :partial => @products
if @products.total_pages > @products.current_page
   page.call 'checkScroll'
else
   page[:loading].hide
end

Application_helper.rb (identical to Ryan's)

def javascript(*args)
  content_for(:head) { javascript_include_tag(*args) }
end

_feed.html.erb

<% unless @feed_items.empty? %>
<% javascript :defaults, 'endless_page' %>
  <table class="microposts" summary="User microposts">
    <%= render :partial => 'shared/feed_item', :collection => @feed_items %>
  </table>
<% end %>
<p id="loading">Loading more page results...</p>

Ryan's index.html.erb

<% title "Products" %>
<% javascript :defaults, 'endless_page' %>

<div id="products">
  <%= render :partial => @products %>
</div>
<p id="loading">Loading more page results...</p>

endless_page.js [identical to Ryan's] (problem may lie here in reference to the /products.js line. I tried changing to feed.js but with no luck).

var currentPage = 1;

function checkScroll() {
  if (nearBottomOfPage()) {
    currentPage++;
    new Ajax.Request('/products.js?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get'});
  } else {
    setTimeout("checkScroll()", 250);
  }
}

function nearBottomOfPage() {
  return scrollDistanceFromBottom() < 150;
}

function scrollDistanceFromBottom(argument) {
  return pageHeight() - (window.pageYOffset + self.innerHeight);
}

function pageHeight() {
  return Math.max(document.body.scrollHeight, document.body.offsetHeight);
}

document.observe('dom:loaded', checkScroll);

Upvotes: 0

Views: 765

Answers (1)

jtwg
jtwg

Reputation: 140

I'm pretty new to rails and trying to do something similar. but your GET request, for sure needs to go to your controller rather than the one in the tutorial. maybe you need a render for the .js format in your controller as well?

I think we are going with jquery instead, but I will try this as well today and update you if I find anything.

---update. i tried this and it worked fine. i think the tutorial had routes set up as resources. Thats probably where you got stuck. Hope it works for you.

Upvotes: 2

Related Questions