Will_paginate，呈现下一页

Question

I'am using will_paginate gem to paginate my posts. And I want to do infinite scroll. I watch few video and read couple of posts, but thats not really what I need (because of my app structure). You see, home.html.erb (to be short), looks like:

<div class='news-lent'>
  <%= render 'posts/posts_for_all', posts_variable: @posts %>
</div>

And my _posts_for_all.html.erb (to be short), look like (to be short):

<% posts_variable.each do |post| %>
  <%= link_to post.theme, post %>
<% end %>
<% will_paginate posts_variable, :next_label => "More" %> # => i need it every
time the page is loaded

I've already wrote JS for all, except one line:

$('.news-lent').append('<%= j render *some_thing* %>')

Well, I don't know what pass to render. I cannot pass my @posts (it will return error(missing partial posts/_post)), and @posts.next_page (it will return 2), and #{posts_path(@post)}?page=#{@post.current_page+1}(but this don't work too) and other problems.

Can you help me, I need something to put inside j render so it rendered next page?

UPDATE

I reworked everything with RailCast videos, and same way like @Szilard Magyar tell me to do, but now it keep rendering the same (first page) all time and it not rendering second page at all, what can create such problem?

UPDATE

Follow railcast video (reworked my app structure), and a new problem appears:

My home.js.coffee:

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

My index.js.erb:

$('.one').append('<%= j render @posts, posts_variable: @posts %>');
  <% if @posts.next_page %>
    $('.pagination').replaceWith('<%= j will_paginate(@posts) %>');
  <% else %>
    $('.pagination').remove();
  <% end %>
<% sleep 3 %>

My index.html.erb:

<div class="news-lent">
  <div class="one">
    <%= render @posts, posts_variable: @posts %>
  </div>

  <div id="infinite-product-scrolling">
    <%= will_paginate @posts, :next_label => " Еще" %>
  </div>
</div>

But now, when I'am on first page and scroll down it rendering second page, but 2x times, and when I again scrolling to bottom and it rendering second page (it not rendering third page). I don't know how to fix it, can you land me again?

Answer 1

index.html.erb

<div class="product-index-list new-product-insert">
  <%= render @products %>
</div>
<div id="infinite-product-scrolling">
  <%= will_paginate @products %>
</div>
<div class="no-more">
  <p>No more products.</p>
</div>

_product.html.erb

<div class="name"><%= product.name %></div>
<div class="oneliner"><%= product.oneliner %></div>

products.js

if ($('#infinite-product-scrolling').size() > 0) {
  $(window).on('scroll', function() {
    $('#infinite-product-scrolling').hide();
    var more_products_url;
    more_products_url = $('#infinite-product-scrolling .pagination .next_page a').attr('href');
    if (more_products_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60) {
      $('.pagination').html("<i class='fa fa-circle-o-notch fa-2x fa-spin'></i>");
      $('#infinite-product-scrolling').show();
      $.getScript(more_products_url);
    }
  });
};

index.js.erb

$('.new-product-insert').append('<%= j render @products %>');
<% if @products.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate @products %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
  $('.no-more').delay(1000).fadeIn(1500);
<% end %>

Answer 2

Solve it, the problem appears because of my mistake. In here:

jQuery ->
  url = $('.pagination .next_page a').attr('href')
  $(window).scroll ->

url variable was assigned only one time, before scrolling and that was my mistake. So if url was save, so it always rendered second page and never third. We have to move our url lower, under .scroll event and it will always check, what page have been rendered. Like this:

jQuery ->
  $(window).scroll ->
  url = $('.pagination .next_page a').attr('href')

By the way, I will recommend to all (if they are using jQuery from RailsCast tutorial ) to add some script to prevent multiple page load when user scroll

jQuery ->
  $(window).scroll ->
    url = $('.pagination .next_page a').attr('href')
    return if(window.pagination_loading) # -> add this
    if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
      window.pagination_loading = true # -> and this 
      $('.pagination').text('Fetching products...')
      $.getScript(url).always ->
        window.pagination_loading = false # -> and this

And for prevent bugs etc. to url variable you need to add a , so it look like url = $('.pagination .next_page a').attr('href') and not like in RailsCast tutorial : url = $('.pagination .next_page').attr('href')