Railsでajax/will_paginateで500の内部サーバーエラーが発生する

Question

各ページに20枚のカードがロードされるカードスライダを構築しました。私は最後のカード（インデックス19のカード）のボタンをクリックするとAJAXコールが行われ、次のページがレンダリングされ、元の20枚のカードが次の20枚のカードに置き換えられます。 will_paginateの宝石を使用して、次のページ（すなわちhttp://localhost:3000/events/queued?page=2）の正しいhrefを抽出できます。しかし、私はそれに要求をすると、コンソールは、 "リソースを読み込めませんでした：サーバーが500のステータス（内部サーバーエラー）で応答しました"というエラーを表示します。私は手動でそのURLを私のブラウザに入力し、そのリンクは正常に動作します。私はwill_paginateとajaxのRailsCastに沿ってフォローし、私のニーズに合わせて修正しようとしましたが、私は途中で何かを壊してしまったと確信しています。助けをあらかじめありがとう！

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：

エラーログ：

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' 

デベロッパーツールは、この行に壊すということを示しています。あなたが新しいページで現在のすべてのレコードを交換したいと

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

Answer 1

既存のページコンテンツを、新しいコンテンツと置き換える必要があります。index.html.erb

これを行う手順は次のとおりです。

1. 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 %> 

あなたindex.html.erb

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

3.Nowで2.Nowあなたajax要求はラインindex.js.erb

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