title: Rails 5: implementing infinite scrolling with will_paginate gem. Internal server error
body: <p>I'm trying to adopt this tutorial to work with my app: <a href="https://www.sitepoint.com/infinite-scrolling-rails-basics/" rel="nofollow noreferrer">https://www.sitepoint.com/infinite-scrolling-rails-basics/</a></p>
  
  <p>Here is the break down of my files:</p>
  
  <pre><code># views/events/index.html.erb
  &lt;table class="table table-hover"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th width="25%"&gt;Events&lt;/th&gt;
        &lt;th class="package-column"&gt;Packages&lt;/th&gt;
        &lt;th&gt;Capacity&lt;/th&gt;
        &lt;th width="30%"&gt;Date&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody id="hits"&gt;
      &lt;%= render partial: 'event_row', locals: { events: @events } %&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div id="infinite-scrolling"&gt;
    &lt;%= will_paginate %&gt;
  &lt;/div&gt;
  
  # views/events/index.js.erb
  $('#hits').append('&lt;%= j render partial: 'event_row', events: @events %&gt;');
  &lt;% if @events.next_page %&gt;
    $('.pagination').replaceWith('&lt;%= j will_paginate(render partial: 'event_row', events: @events) %&gt;');
  &lt;% else %&gt;
    $(window).off('scroll');
    $('.pagination').remove();
  &lt;% end %&gt;
  
  # app/assets/javascripts/pagination.js
  jQuery(function() {
    if ($('#infinite-scrolling').size() &gt; 0) {
      return $(window).on('scroll', function() {
        var more_posts_url; // &lt;- /events?page=2
        more_posts_url = $('.pagination .next_page').attr('href');
        console.log(more_posts_url);
        if (more_posts_url &amp;&amp; $(window).scrollTop() &gt; $(document).height() - $(window).height() - 250) {
          $('.pagination').html('&lt;i class="fa-li fa fa-spinner fa-spin"&gt;');
          $.getScript(more_posts_url);
        }
        return;
      });
    }
  });
  
  
  # events/_event_row.html.erb
  &lt;% @events.each do |event| %&gt;
    &lt;tr class="event-row" data-started="&lt;%= event.started_at%&gt;"&gt;
      &lt;td class="event-title-text" data-logo="&lt;%= event.platform_type %&gt;" data-url="&lt;%= event.platform_url %&gt;" data-identifier="&lt;%= event.id %&gt;" &gt;&lt;%= link_to event.title, event_path(event), remote: true %&gt;&lt;img src="" alt=""&gt;&lt;/td&gt;
        &lt;td class="package-column"&gt;
        &lt;% if event.packages.any? %&gt;
          &lt;div&gt;
          &lt;% event.packages.each do |p| %&gt;
           &lt;%= image_tag "http://assets.gathrly.com/needs-#{p.kind}.png", :alt =&gt; "#{p.kind}", class: "package-image" %&gt;
          &lt;% end %&gt;
          &lt;/div&gt;
        &lt;% else %&gt;
          &lt;div class="package-column"&gt;&lt;span&gt;...&lt;/span&gt;&lt;/div&gt;
      &lt;% end %&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;%= event.capacity %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= frmt_start_time(event) if event.started_at? %&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>VM20694:1 GET http://localhost:3000/events?page=2&amp;_=1492558098709 500 (Internal Server Error)
  </code></pre>
  
  <p>And the following error in my terminal:</p>
  
  <pre><code>ActionView::Template::Error (undefined local variable or method `events' for #&lt;#&lt;Class:0x0055765f58b5f8&gt;:0x007f4101a75af0&gt;):
  1: &lt;% events.each do |event| %&gt;
  2:   &lt;tr class="event-row" data-started="&lt;%= event.started_at%&gt;"&gt;
  3:     &lt;td class="event-title-text" data-logo="&lt;%= event.platform_type %&gt;" data-url="&lt;%= event.platform_url %&gt;" data-identifier="&lt;%= event.id %&gt;" &gt;&lt;%= link_to event.title, event_path(event), remote: true %&gt;&lt;img src="" alt=""&gt;&lt;/td&gt;
  4:       &lt;td class="package-column"&gt;
  </code></pre>
  
  <p>So I don't quite understand the errors here. If I open a new window and visit <code>http://localhost:3000/events?page=2&amp;_=1492558098709</code> I am taken to the next set of 10 events and it looks fine.</p>
  
  <p>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.</p>
  
  <p>Any help resolving this would be great. I'm guessing I'm not passing in <code>events</code> properly somewhere in the JS..</p>
  
  <p>Edit:</p>
  
  <p>I'm getting a bit further</p>
  
  <p>I edited my <code>index.js.erb</code> file to this:</p>
  
  <pre><code>$('#hits').append('&lt;%= j render partial: 'event_row', locals: { events: @events } %&gt;');
  &lt;% if @events.next_page %&gt;
    $('.pagination').replaceWith('&lt;%= j will_paginate render partial: 'event_row', locals: { events: @events } %&gt;');
  &lt;% else %&gt;
    $(window).off('scroll');
    $('.pagination').remove();
  &lt;% end %&gt;
  </code></pre>
  
  <p>Now I get the following error:</p>
  
  <pre><code>ActionView::Template::Error (undefined method `total_pages' for #&lt;ActionView::OutputBuffer:0x007f3667108e80&gt;):
      1: $('#hits').append('&lt;%= j render partial: 'event_row', locals: { events: @events } %&gt;');
      2: &lt;% if @events.next_page %&gt;
      3:   $('.pagination').replaceWith('&lt;%= j will_paginate(render partial: 'event_row', locals: { events: @events }) %&gt;');
      4: &lt;% else %&gt;
      5:   $(window).off('scroll');
      6:   $('.pagination').remove();
  </code></pre>
  
  <p>I'm guessing it's <code>will_paginate</code> related now. </p>