CODEWITHSUNDEEP
jqueryruby-on-railserb
Antonio
Antonio

Reputation: 751

Rails 5: implementing infinite scrolling with will_paginate gem. Internal server error

I'm trying to adopt this tutorial to work with my app: https://www.sitepoint.com/infinite-scrolling-rails-basics/

Here is the break down of my files:

# views/events/index.html.erb
<table class="table table-hover">
  <thead>
    <tr>
      <th width="25%">Events</th>
      <th class="package-column">Packages</th>
      <th>Capacity</th>
      <th width="30%">Date</th>
    </tr>
  </thead>

  <tbody id="hits">
    <%= render partial: 'event_row', locals: { events: @events } %>
  </tbody>
</table>
<div id="infinite-scrolling">
  <%= will_paginate %>
</div>

# views/events/index.js.erb
$('#hits').append('<%= j render partial: 'event_row', events: @events %>');
<% if @events.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(render partial: 'event_row', events: @events) %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
<% end %>

# app/assets/javascripts/pagination.js
jQuery(function() {
  if ($('#infinite-scrolling').size() > 0) {
    return $(window).on('scroll', function() {
      var more_posts_url; // <- /events?page=2
      more_posts_url = $('.pagination .next_page').attr('href');
      console.log(more_posts_url);
      if (more_posts_url && $(window).scrollTop() > $(document).height() - $(window).height() - 250) {
        $('.pagination').html('<i class="fa-li fa fa-spinner fa-spin">');
        $.getScript(more_posts_url);
      }
      return;
    });
  }
});


# events/_event_row.html.erb
<% @events.each do |event| %>
  <tr class="event-row" data-started="<%= event.started_at%>">
    <td class="event-title-text" data-logo="<%= event.platform_type %>" data-url="<%= event.platform_url %>" data-identifier="<%= event.id %>" ><%= link_to event.title, event_path(event), remote: true %><img src="" alt=""></td>
      <td class="package-column">
      <% if event.packages.any? %>
        <div>
        <% event.packages.each do |p| %>
         <%= image_tag "http://assets.gathrly.com/needs-#{p.kind}.png", :alt => "#{p.kind}", class: "package-image" %>
        <% end %>
        </div>
      <% else %>
        <div class="package-column"><span>...</span></div>
    <% end %>
    </td>
    <td><%= event.capacity %></td>
    <td><%= frmt_start_time(event) if event.started_at? %></td>
  </tr>
<% end %>

I seem to trigger event with the pagination.js file. When I scroll to the bottom I get the following error in the chrome window:

VM20694:1 GET http://localhost:3000/events?page=2&_=1492558098709 500 (Internal Server Error)

And the following error in my terminal:

ActionView::Template::Error (undefined local variable or method `events' for #<#<Class:0x0055765f58b5f8>:0x007f4101a75af0>):
1: <% events.each do |event| %>
2:   <tr class="event-row" data-started="<%= event.started_at%>">
3:     <td class="event-title-text" data-logo="<%= event.platform_type %>" data-url="<%= event.platform_url %>" data-identifier="<%= event.id %>" ><%= link_to event.title, event_path(event), remote: true %><img src="" alt=""></td>
4:       <td class="package-column">

So I don't quite understand the errors here. If I open a new window and visit http://localhost:3000/events?page=2&_=1492558098709 I am taken to the next set of 10 events and it looks fine.

I don't get the console error either because that template works fine when I initially load the page. Then when it tries to load the next set of 10 events it gives me a template error.

Any help resolving this would be great. I'm guessing I'm not passing in events properly somewhere in the JS..

Edit:

I'm getting a bit further

I edited my index.js.erb file to this:

$('#hits').append('<%= j render partial: 'event_row', locals: { events: @events } %>');
<% if @events.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate render partial: 'event_row', locals: { events: @events } %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
<% end %>

Now I get the following error:

ActionView::Template::Error (undefined method `total_pages' for #<ActionView::OutputBuffer:0x007f3667108e80>):
    1: $('#hits').append('<%= j render partial: 'event_row', locals: { events: @events } %>');
    2: <% if @events.next_page %>
    3:   $('.pagination').replaceWith('<%= j will_paginate(render partial: 'event_row', locals: { events: @events }) %>');
    4: <% else %>
    5:   $(window).off('scroll');
    6:   $('.pagination').remove();

I'm guessing it's will_paginate related now.

Upvotes: 0

Views: 1715

Answers (1)

Sebasti&#225;n Palma
Sebasti&#225;n Palma

Reputation: 33420

I tried to reproduce your problem and I realized that with your tweak on the replaceWith function it raised the undefined method 'total_pages' for #<ActionView::OutputBuffer:...> error, and this is because the will_paginate method is waiting for an ActiveRecord_Relation, not an ActionView::OutputBuffer, that's what you were giving it:

Try instead replacing it just with the j will_paginate:

$('#hits').append('<%= j render partial: 'event_row', locals: { events: @events } %>');
<% if @events.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate %>');
<% else %>
  ...
<% end %>

Here there's a repo to see how it works.

Upvotes: 1

Related Questions