How to implement Infinite Scrolling in Rails

Question

Hi I am working on a ROR project with ruby-2.2.2 and rails 4. i have implemented an infinite scroll in my webpage to a specific area(div specific) and its working fine, but whenever a horizontal scrolling is aded to that div either by increasing the width of the table or by increasing the number of "td" inside the table, it sends multiple request for the same page on a single scroll.

html page:
<div class="ibox-content" style="height: 450px;overflow-y: scroll;" id="user_mangmnet_scroll_div">
  <table class="table table-hover">
    <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Address</th>
      <th>Zipcode</th>
      <th>Phone Number</th>
      <th>Email</th>
      <th>User Type</th>
      <th>Actions</th>
    </tr>
    </thead>
    <tbody id="user_management_container">
      <%= render 'dashboard/dashboards/admin/user_managment.html.erb' %>
    </tbody>
  </table>
</div>
<div id="user-pagination-container">
  <%= will_paginate @user_registered %>
</div>

jQuery:

$(document).ready(function() {
    if ($('#user-pagination-container .pagination').length) {
      $('#user_mangmnet_scroll_div').scroll(function() {
        var url = $('#user-pagination-container .pagination .next_page').attr('href');
        if(url && ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)) {
          return $.getScript(url);
        }

      });
      return $('#user_mangmnet_scroll_div').scroll();
    }
  });

The problem is whenever i added a horizontal scrolling to the div it sends multiple request for the same page on a single scroll.

Please help Thanks in advance :)

score 0 · Answer 1 · answered May 05 '19 at 17:46

I think you need to include this answer that I found for you here: Is there a vertical scroll event in jQuery

You check if scroll was vertical and only then you call action.

copy - paste

var prevTop = 0;
$(document).scroll( function(evt) {
    var currentTop = $(this).scrollTop();
    if(prevTop !== currentTop) {
        prevTop = currentTop;
        console.log("I scrolled vertically.");
    }
});

and make your code something like that:

$(document).ready(function() {
    var prevTop = 0;
    var currentTop = 0;
    if ($('#user-pagination-container .pagination').length) {
      $('#user_mangmnet_scroll_div').scroll(function() {

        currentTop = $(this).scrollTop();
        if(prevTop !== currentTop) {
           prevTop = currentTop
        var url = $('#user-pagination-container .pagination .next_page').attr('href');
        if(url && ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)) {
          return $.getScript(url);
        }

        } // end of checking if prevTop!==currentTop
      });
      return $('#user_mangmnet_scroll_div').scroll();
    }
  });

I didnt check if it works. I dont know also why do you return

$('#user_mangmnet_scroll_div').scroll(); in if statement...

thanks but it didn't solve my problem...i am scrolling vertically but when there is a horizontal scroll my verticall scroll sends multiple request. — awsm sid, May 06 '19 at 16:36
hmm... what your scroll event registers ? it runs twice when you scroll vertically ? — sonic, May 06 '19 at 16:56
its a normal scroll as we see on any website but it sends multiple request when i scroll it once. it means the scrolling condition returns true every time. — awsm sid, May 08 '19 at 17:15

How to implement Infinite Scrolling in Rails

1 Answers1