Selective page endless scrolling

Question

I have implemented endless scrolling on a number pages using the following javascript which works well.

$(document).ready(function() {
  if ($('.pagination').length) {
    $(window).scroll(function() {
      var url = $('.pagination .next_page').attr('href');
      if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
        $('.pagination').text("Please Wait...");
        return $.getScript(url);
      }
    });
    return $(window).scroll();
  }
});

This is placed in my application.js file.

I have just now realised that I have some pagination links on other pages that I do not wish to have endless scrolling however they are replaced with "Please Wait..."

Is it possible to only have the code above active on certain pages or controllers?

Answer 1

Give your will_paginate a unique #id so that they're not all using .pagination , which is the reason the other endless scrolls are appending the "please wait".

example:

<%= will_paginate @posts, :params => {:controller => 'posts', :action => 'index'}, id: "posts_pagination"%>

Here you also see how to delegate the will_paginate to a certain controller and action.

will_paginate doesn't always play ball with adding an #id so you might want to try and add a .class instead:

<%= will_paginate @posts, :params => {:controller => 'posts', :action => 'index'}, class: "posts_pagination"%>

And then in your application.js – Bind the infinity-script to #posts-pagination (if #id ) or .posts_pagination (if .class ) instead of just .pagination :

favorite I have implemented endless scrolling on a number pages using the following javascript which works well.

$(document).ready(function() {
  if ($('.posts-pagination').length) {
    $(window).scroll(function() {
      var url = $('.posts-pagination .next_page').attr('href');
      if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
        $('.posts-pagination').text("Please Wait...");
        return $.getScript(url);
      }
    });
    return $(window).scroll();
  }
});

You may want to give the url a unique variable depending on your circumstances so that each infinity scroll doesn't fetch another infinity scroll's url

just change var url = $('.posts-pagination .next_page').attr('href');

to:

var url1 = $('.posts-pagination .next_page').attr('href');

var url2 = $('.comments-pagination .next_page').attr('href');

And so on.

And voilá. You're good to go.