Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

will_paginate with endless Scrolling | Rails4

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>
like image 611
Mini John Avatar asked Aug 31 '13 07:08

Mini John


People also ask

How do I render a website without a layout in rails?

You can also tell Rails to render with no layout at all: You can use the :location option to set the HTTP Location header: Rails will automatically generate a response with the correct HTTP status code (in most cases, this is 200 OK ). You can use the :status option to change this:

What if there is no controller-specific layout in rails?

If there is no such controller-specific layout, Rails will use app/views/layouts/application.html.erb or app/views/layouts/application.builder. If there is no .erb layout, Rails will use a .builder layout if one exists.

What is X-Frame-Options in rails 4?

In Rails 4, the X-Frame-Options HTTP header value has been set by default as SAMEORIGIN (show source), this allows iframing only on the same domain and prevents clickjacking which is good for security.

How to render content along with non-content status codes in rails?

If you try to render content along with a non-content status code (100-199, 204, 205, or 304), it will be dropped from the response. Rails uses the format specified in the request (or :html by default). You can change this passing the :formats option with a symbol or an array:


2 Answers

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

like image 120
Mini John Avatar answered Oct 02 '22 22:10

Mini John


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
like image 30
ricks Avatar answered Oct 02 '22 21:10

ricks