0

I am trying to achieve unlimited scrolling in my rails app using kaminari. Its working as expected but if I move the scrollbar up and down several times its loading again and again until I stop scrolling.

Here is my pagination.js.coffee

$ ->
  content = $('#listings')    # where to load new content
  viewMore = $('#view-more') # tag containing the "View More" link

  isLoadingNextPage = false  # keep from loading two pages at once
  lastLoadAt = null          # when you loaded the last page
  minTimeBetweenPages = 5000 # milliseconds to wait between loading pages
  loadNextPageAt = 10      # pixels above the bottom

  waitedLongEnoughBetweenPages = ->
    return lastLoadAt == null || new Date() - lastLoadAt > minTimeBetweenPages

  approachingBottomOfPage = ->
    return $(document).scrollTop() < document.body.offsetHeight - loadNextPageAt

  nextPage = ->
    url = viewMore.find('a').attr('href')

    return if isLoadingNextPage || !url

    viewMore.addClass('loading')
    isLoadingNextPage = true
    lastLoadAt = new Date()

    $.ajax({
      url: url,
      method: 'GET',
      dataType: 'script',
      success: ->
        viewMore.removeClass('loading');
        isLoadingNextPage = false;
        lastLoadAt = new Date();
    })

  # watch the scrollbar
  $(window).scroll ->
    if approachingBottomOfPage() && waitedLongEnoughBetweenPages()
      nextPage()

  # failsafe in case the user gets to the bottom
  # without infinite scrolling taking affect.
  viewMore.find('a').click (e) ->
    nextPage()
    e.preventDefault()

search.html.erb

  <div id="listings">
                  <%= render 'pages/listings' %>
                </div>
                <% unless @rooms.current_page == @rooms.total_pages %>
                    <p id="view-more">
                      <%= link_to('View More', url_for(page: @rooms.current_page + 1)) %>
                    </p>
                <% end %>

search.js.erb

$('#listings').append("<%=j render('pages/listings') %>");

<% if @rooms.current_page == @rooms.total_pages %>
$('#view-more').remove();
<% else %>
$('#view-more a').attr('href', '<%= url_for(page: @rooms.current_page + 1) %>');
<% end %>

Could someone tell me what am doing wrong here?

Abhilash
  • 2,864
  • 3
  • 33
  • 67
  • have you seen this tutorial: https://github.com/amatsuda/kaminari/wiki/How-To:-Create-Infinite-Scrolling-with-jQuery#javascript ? I am asking because I can see differences between your implementation and the example. Hope it helps! – fagiani Dec 26 '15 at 19:25
  • @fagiani seen that before..but it uses the infinite scroll gem and am trying to avoid it as its no longer maintained. – Abhilash Dec 26 '15 at 19:39
  • Hi there, I am on vacations right now, so, I don't have access to my code. I did this in a simple way a few weeks ago. What I did is that I binded the window's scroll event to a function, something like $(window).on('scroll', function()...).. And in that function I calculate what you do as well, if the scroll is near the bottom, if so, I unbind the ''scroll" event with $(window).off('scroll',...). And when the jquery call to load your next page is done, you just need to bind the scroll event again. That's what I did, and it works. – fanta Dec 27 '15 at 15:53

0 Answers0