#114 Endless Page (revised)

Great screencast as usual, wondering though the following:

1) This is similar to the approach you showed in the sharing mustache templates screencast, wondering given that it essentially achieves the same objective when you would choose to use this simpler jquery approach vs using mustache template, ie what are the pros and cons of each.

2) any hints how one can test endless scrolling in rspec/capybara integration tests, specifically, any ideas as to how you would simulate a scroll near the bottom in capybara?

Nice revision. In fact, I am creating a web app for my company (unbeknownst to them) that connects to a legacy DB and one of our tables has hundreds of rows. This is going to look good on that page!

I am so glad I signed up for your Railscasts. Keep them coming!

I tried this for some reason. my index.js.erb is not being listened to but i see it on my terminal " Processing by BusinessesController#index as HTML" .

All the products (businesses) are being loaded at once. I am not sure what i'm missing, any ideas?

Interesting, i was appending a class instead on an id and that was causing the problem. I didn't think this mattered at all. Strange.

Nice an neat except for this trick with multiple scroll events being triggered. I think it would be much cleaner to unbind the scroll event till we get the results and once more products are loaded, bind it again.

Railscast is the best $9 I spend every month. I would love to pay $50 and get one episode each weekday.

Excellent episode Ryan, I really love the fallback functionality remaining intact. Definitely going to use this.

The main problem - how can i give a link to a some comment?

I've wanted to implement this for some time now but had a few questions:
1) Should the URL change? i.e. /?page=2
2) What happens when you click a product then click back, are all the same products still loaded? I have seen this problem with a couple websites that use Endless Page.

Thanks

I like endless scrolling except for one gotcha - it makes it very hard for users to access links on the page footer. One way to work around this is to use the jQuery Waypoints plugin to ensure that the footer is always displayed (despite the endless scrolling).

See this page about performance impacts of adding attaching a handler to window scroll: http://ejohn.org/blog/learning-from-twitter/

I have a respond_to block in the index action of my controller, so I had to add format.js to render the RJS template associated with this action (i.e. /app/views/products/index.js.erb):

  def index
    @products = Product.order("name").page(params[:page]).per_page(10)

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @products }
      format.js
    end
  end

I decided against the Endless Page feature, and instead slightly adapted this RailsCast's code to provide a "Show more results" link, which would append results in much the same manner, but instead by click rather than reached-bottom-of-page detection.

The main change is the addition of the prepend line in products.js.coffee:

jQuery ->
  if $('.pagination').length
    $('#append_and_paginate').prepend('<a id="append_more_results" href="javascript:void(0);">Show more products</a>');
    $('#append_more_results').click ->
      url = $('.pagination .next_page').attr('href')
      if url
        $('.pagination').text('Fetching more products...')
        $.getScript(url)

Regarding the view, I only added a surrounding div:

<div id="append_and_paginate">
  <%= will_paginate @products %>
</div>

And in products/index.js.erb I just changed the remove line to $('#append_and_paginate').remove(); so that both the "Show more results" link and pagination is removed when no more results are available.

Of course some css had to be added to make things look nice.

But anyway, the cool thing about this approach is that the "Show more products" link is only added by Javascript (hence only if Javascript is present and enabled). The click handler is bound to the DOM element with id="append_more_results", which is the id of the link tag that is prepended.

Simple and useful.

Only feedback is that the products/index.js.erb in show notes is missing the sleep call.

Thanks for this ryan, amazing as always!
I used this with Kaminari along with using a script to see if the pagination links are in the window view area (since I was working with a table that is in the middle of the page)
Coffee Script below:

jQuery ->
        isScrolledIntoView = (elem) ->
                docViewTop = $(window).scrollTop()
                docViewBottom = docViewTop + $(window).height()
                elemTop = $(elem).offset().top
                elemBottom = elemTop + $(elem).height()
                (elemTop >= docViewTop) && (elemTop <= docViewBottom)

        if $('.pagination').length
                $(window).scroll ->
                        url = $('.pagination .next_page a').attr('href')
                        if url && isScrolledIntoView('.pagination')
                                $('.pagination').text('Fetching more...')
                                $.getScript(url)
                
                $(window).scroll()

And in the index.js.erb file:

$('#all_pages').append('<%= j render(@pages) %>');
<% if (@pages.current_page < @pages.num_pages) %>
        $('.pagination').replaceWith('<%= j paginate(@pages) %>');
<% else %>
        $('.pagination').remove();
<% end %>

I used @pages.current_page < @pages.num_pages since I couldn't get the @pages.next? method working with collections. Hopefully it will work in a future release.

I posted a question on Stack Overflow that is related to this episode. I'd be much obliged if anyone could provide some insight.

rails infinite scroll ajax actions on page > 1 items

Is there any way to use jQuery to filter items that are on next page or subsequent pages before you have scrolled to them? The use case would be a view of thumbnails that the user can scroll through with a list of tags above them that the user could use to narrow down the set of results. The problem I am having is not being able to return the correct results if the user has not scrolled down the page.

I guess Google would index the endless page as multiple pages (products?page=1, products?page=2) by following the links in the will_paginate nav.

If Google then directs a user to, say, /products?page=2 then that user would have no way to conveniently navigate to the content on page 1. Has anyone tried addressing this, perhaps with two-directional endless scrolling (when user scrolls near top of page we load in previous records if they exist), or by redirecting to page 1 if a JavaScript-enabled browser requests any other page?

@brucepom: Add rel="nofollow" to the pagination links, so Google will not index the paginated list. In addition, add a sitemap.xml to your site to tell Google the single pages.

I keep getting weird errors in rails 3 when using the render method. Also I don't have access to the instance variable. I wrote my issue on stack overflow if any you guys would have the time to have a look at my code. Please

Is there an issue with using render in rails 3 in js files?

Stackoverflow question

How can u get rid of the "page=1" on the url link?

Getting an error on this line (in the coffeescript file)

puts " if ($('.pagination').length) {"

The error message says: Uncaught TypeError: Cannot read property 'length' of null

What could have gone wrong? The div exists in my index :(

This approach doesn't seem to work on all mobile browsers. It worked in Chrome for iPhone, but not in Safari.

This was very helpful. Thanks!

Can partials be cached with this approach?

Works great!
In chrome however it seems to 'stutter' or 'jump' when it loads more. I've removed all other css, trying to rule any wierdness out.

It does work perfectly in Firefox however. I disabled any extensions as well. Other sites like facebook.com or fab.com are super smooth in chrome, is this normal using this method?

My mistake, I found that I was pulling an association in the partial, which wasn't included on the order method.

Updated to Book.order("name").includes(:authors) and it works like a charm! Way smoother.

doesnt work, wasted $9

it doesnt work

Great tutorial. I couldn't get it to work until I changed line 4 in products.js.coffee from

url = $('.pagination .next_page').attr('href')

to

url = $('.pagination .next_page a').attr('href')

otherwise it doesn't pull the href attribute from the link.
Thanks for the tutorial!

For some reason some of my posts are getting duplicated when the next page of posts are getting loaded. Has anyone had this happen to them??

I managed to do it with an "index.js.erb" file in Rails 4. Just add this coffeescript:

$(window).on 'scroll', ->
  if $('.pagination').length
    @url = $('.pagination .next_page').attr('href')
    if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
      $('.pagination').remove()
      $('#articles').append('<div>')
      $('#articles div').last().load @url+' #articles', ->
          if $('.next_page.disabled').length
            $('.pagination').remove()

This loads the next page then uses the pagination on the newly loaded page until there are no more next pages. Just replace "#articles" with the id of your container in the script. Skip the index.js.erb and respond_to jazz.

Has anyone every tried implementing an endless scroll up? Trying to do this for an e-commerce site, it mostly works but there are a few bugs that need to worked out. If anyone has done anything like this, I would love to know how you went about it. Thanks

-John

Thanks for tutorial. I did infinite scrolling for my Art Asian site. However, when I go to a product page, then hit back button, it not keep same content and position. Is there any plugin to do that same as Pinterest or Polyvore

Thanks for another great tutorial Ryan! Works great with Rails 4.

For anyone that is interested, here's a slick way to replace the generic loading text with an animated gif.

Replace

$('.pagination').text("Fetching more products...")

with

$('.pagination').html("<img src='/assets/ajax-loader.gif' alt='Loading...' title='Loading...' />")

You can create and download your own loading animation here:
Link

You can add the downloaded gif to your images directory under assets. Rails knows to look there.

works fantastic with Kaminari AND Rails 4 with turbolinks. even after so many years. Thanks Ryan!

Tip: If you're using Kaminari, just add class="next_page" to the next page link in the Kaminari view

<li class="next_page">
  <%= link_to_unless current_page.last?, raw(t 'views.pagination.next'), url, :rel => 'next', :remote => remote %>
</li>

How to use endless loading with group_by . I am using will_paginate. But when add group_by it show "undefined method 'count' for AR Relation.

I don't know if someone have encountered this problem so I'm going to ask here. I have implemented this already and it's working but their is a little problem. On the first page all of the javascript are working for example lightbox(html5lightbox), but for the remaining pages that is generated the javascript isn't working.

hi

[Best Services