在 Rails 中使用 ajax/will_paginate 出现 500 个内部服务器错误

Question

I've built a card slider where 20 cards are loaded on each page. I'm trying to have it so that when the user clicks on a button on the the last card (card with index 19), an AJAX call is made to render the next page and replace my original 20 cards with the next 20. I'm using the will_paginate gem and I can extract the correct href for the next page (ie http://localhost:3000/events/queued?page=2 ). But when I make a get request to it, the console shows the error "Failed to load resource: the server responded with a status of 500 (Internal Server Error)". I manually entered that url into my browser and that link works fine. I tried to follow along the RailsCast on will_paginate and ajax and modify it to suit my needs but I'm pretty sure I botched something along the way. Thanks in advance for any help!

index.html.erb

<% if @events %>

  <div id="event_carousel" class="col-sm-10 col-sm-offset-1 owl-carousel">
    <% @events.each do |event| %>
      <%= render 'event', event: event %>
    <% end %>
  </div>

  <!-- this is set to display none -->
  <div class="text-center"> 
    <h3><%= will_paginate @events %></h3>
  </div>

<% end %>

event.js

var cardCounter = 0;
  var cardOwlIndex = 0;
  var linksArr = [];
  $.ajaxSetup({'cache': true
  });
$(function(){
  var owl = $("#event_carousel");

  links = $('.pagination > a');
  for (var i = 0; i < links.length - 1; i++) {
    linksArr.push(links[i].href);
  };

    $('.btn-square.like').off().on('click', function() {
      $(this).toggleClass('btn-pressed-square-like');
      owl.trigger('owl.next');
      var owlIndex = $(this).closest('.owl-item').index();
      alert(owlIndex);
      cardCounter = owlIndex;
      cardOwlIndex = owlIndex;
      console.log(cardCounter);

      if (cardCounter === 19 && cardOwlIndex === 19) {
        alert(linksArr[0]);
        $.get(linksArr[0], null, null, "script");
      };
    });
});

index.js.erb

$('#event_carousel').html("<%= escape_javascript(render partial: 'event') %>");

events_controller.rb

  def index
     @events = Event.with_rankings(current_user.id, Date.today, 1.month.from_now)
                      .order("event_rankings.weighted_score DESC")
                      .paginate(:page => params[:page], :per_page => 20)
      respond_to do |format|
        format.js
      end
  end

EDIT:

error logs:

ActionView::Template::Error (undefined local variable or method `event' for #<#<Class:0x007fcbd06fd850>:0x007fcbd553d740>):
    1: <div class="col-sm-12">
    2:   <div class="col-sm-12 event-card flip" style="background-image: url(<%= event.image.url(:large) %>);" id="<%= event.id%>">
    3:     <div class="card">
    4:       <div class="card-face front">
    5:       <% if current_user && current_user.admin %>
  app/views/events/_event.html.erb:2:in `_app_views_events__event_html_erb__2820478606869763483_70256714846000'
  app/views/events/index.js.erb:1:in `_app_views_events_index_js_erb___681525537736992419_70256717102340'
  app/controllers/events_controller.rb:55:in `queued'

DevTools shows that it's breaking on this line:

xhr.send( ( options.hasContent && options.data ) || null );

Answer 1

As you want to replace all of the current records with the new page results so you need to replace existing page content with the new one exactly like the index.html.erb

Here are steps to do it.

1.Create a common partial for your events . _events.html.erb

<% if @events %>    
  <div id="event_carousel" class="col-sm-10 col-sm-offset-1 owl-carousel">
    <% @events.each do |event| %>
      <%= render 'event', event: event %>
    <% end %>
  </div>

  <!-- this is set to display none -->
  <div class="text-center"> 
    <h3><%= will_paginate @events %></h3>
  </div>

<% end %>

2.Now in your index.html.erb

<div id="events_container">
<%=render partial: 'events'%>
</div>

3.Now for your ajax request add following line index.js.erb

$('#events_container').html("<%= escape_javascript(render partial: 'events') %>");