will_paginate with endless Scrolling | Rails4

Question

THIS IS THE SOLUTION

So i'm using will_paginate / Bootstrap Will Paginate with Endless Scrolling.

To get the Pagination working:

1.) In my Controller i updated my index action with

@clips = Clip.order("created_at desc").page(params[:page]).per_page(20)

2.) Edit my index view:

<%= will_paginate @clips%>

DONE

Pagination works just fine.

To Add Endless scrolling i did the same steps as in my previous Rails 3 App.

1.) Edit my clips.js.coffee

jQuery ->
$('#clips-masonry').imagesLoaded ->
    $('#clips-masonry').masonry itemSelector: ".clips-masonry" # Thats my Masonry

if $('.pagination').length # Thats for the Endless Scrolling
    $(window).scroll ->
        url = $('.pagination .next_page a').attr('href')
        if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
            # What to do at the bottom of the page
            $('.pagination').text("Fetching more Clips...")
            $.getScript(url)
        $(window).scroll()

2.) Create an index.js.erb with:

$boxes = $('<%= j render(@clips) %>')

$('#clips-masonry').append( $boxes ).imagesLoaded( function(){
  $('#clips-masonry').masonry( 'reload');
});
<% if @clips.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@clips) %>');
<% else %>
  $('.pagination').remove();
<% end %>

3.) Added format.js to my Controller index action

def index
    @clips = Clip.order("created_at desc").page(params[:page]).per_page(12)
    respond_to do |format|
        format.html
        format.js
    end
end

4.) My _clip.html.erb is wrapped with the div

 <div class="clip-box clips-masonry" data-no-turbolink>

Rambort

What's the problem? the endless scroll pagination code will work (though it's not turbolinks friendly) - if you list your error you might get some insight. – Dettmer

The Problem is that it is not working :), There is no Error, endless is just not working :( I think it has to do with the format.js that i have to include in my controller. But in Rails 4 the controllers changed and i cant get it to work. – Rambort

It works fine for me, I'm still using the respond_to block with format.js as well. What is the event calling in your log, html? something like clips?page=2 with ClipsController#index as HTML ? – Dettmer

Could you send me a pastebin or gist from your controller index action so i could see how you wrote it down ? Yeah clips?page=2 etc. – Rambort

Sure -- it's pretty bare - pastebin.com/raw.php?i=Ckr5GaYi – Dettmer

Well at least i didn't get an error from the controller :). Let me populate real quick the database to check. – Rambort

Still nothing, let me update my Question. – Rambort

Thanks for this, really helpful – Foliar

Answer 1

Ok, i got it working with my Updated Question, everyone who stumbles upon this problem, This is the solution.

Rambort

Answer 2

Incase someone prefers to use JS/JQUERY:

$(window).scroll(function() {

  var url;

  // Checks if products are currently being loaded
  if (window.pagination_loading) {
    return;
  }

  // Grabs the URL from the "next page" button 
  url = $('.pagination .next_page').attr('href')

  // Chckes if you're n height from the bottom
  if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {

    // Variable to know that you are currently loading products
    window.pagination_loading = true;

    // Text while loading
    $('.pagination').text('');

    // Run the script
    return $.getScript(url).always(function() {
      return window.pagination_loading = false;
    });

  }
});

Index.js.erb:

$products = $('<%= j render(@products) %>')

$('#productsContainer').append( $products );

<% if @products.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@products) %>');
<% else %>
  $('.pagination').remove();
<% end %>

index.html.erb

<div class="container">
    <%= will_paginate @products %>
</div>   

Controller:

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

Foliar