0

I'm trying to implement infinite scroll using will_paginate. Given my current code, the output is that on each page, content is printed twice (...) and when I get to the bottom of the page, only regular pagination is there (no infinite scroll). When I get to the last page, the pagination is gone (so pagination.remove is working).

The app is simple. Users are listed, so other users can give them recommendations.

index.html.erb:

<div id="users">

  <%= render :partial => 'help/user' %>

</div>

<%= will_paginate @users %>

<script>
$('#users').append('<%= j render :partial =>'help/user' %>');
<% if @users.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@users) %>');
<% else %>
  $('.pagination').remove();
<% end %>
<% sleep 1 %>
</script>

I placed the script above there, because when I put it on index.js.erb, it didn't do anything.

help.coffee (the above file is in help folder, and managed by help controller):

jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
        $('.pagination').text('Fetching more...')
        $.getScript(url)
    $(window).scroll()

help controller:

  @users = User.all.order("updated_at DESC").paginate(page: params[:page], per_page: 5)
  respond_to do |format|
    format.html
    format.js
  end
superbot
  • 401
  • 3
  • 19
  • The content is shown twice because you are rendering users on the template and on the script tag (same for the pagination). Are you following a tutorial for infinite scroll with will_paginate or doing it by yourself? it's hard to fix your code since your intention on each part is not clear. Use a tutorial if you are a beginner, something like https://railsblogs.rohityadav.in/2017/10/infinite-scrolling-with-will-paginate.html – arieljuod Oct 13 '19 at 23:21
  • @arieljuod I was following the tutorial, and that's how they had it... (https://www.youtube.com/watch?v=PQX2fgB6y10). I tried it exactly as they had it, and it didn't work. I have no idea what to do. – superbot Oct 14 '19 at 19:08
  • You are mixing the code from index.html.erb with the code from index.js.erb (two different views for two different formats). You say it "didn't do anything" when you use index.js.erb, what does "didn't do anything" mean? any error on the browser console or rails server log? you need to make that .js.erb file work – arieljuod Oct 14 '19 at 19:16
  • @arieljuod Thank you. I meant that it was as if those two were not connected. No difference between before creating index.js.erb and after. Which is why I deleted index.js.erb and just wrote the code into the index.html.erb. In that case, at least the wrong (twice printed) effect was showing... (no error log) – superbot Oct 14 '19 at 19:18
  • index.js.erb is rendered when your javascript executes `$.getScript(url)`, .html.erb is rendered when you first enter the page. You have to debug your code, does the javascript reach that line? use the browser's dev tool and put a breackpoint there to know that. – arieljuod Oct 14 '19 at 22:01

0 Answers0