Rails 中的 ajax/will_paginate 出现 500 内部服务器错误

Question

我制作了一个卡片滑块，每页加载 20 张卡片。我正在尝试使用它，以便当用户单击最后一张卡片（索引为 19 的卡片）上的按钮时，会调用 AJAX 来呈现下一页并将我原来的 20 张卡片替换为next 20. 我正在使用 will_paginate gem，我可以为下一页提取正确的 href（即 http://localhost:3000/events/queued?page=2）。但是当我向它发出 get 请求时，控制台显示错误 "Failed to load resource: the server responded with a status of 500 (Internal Server Error)"。我在浏览器中手动输入 url 并且 link 工作正常。我试图在 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

编辑：

错误日志：

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 显示它在这条线上中断：

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

Answer 1

由于您想用新页面结果替换所有当前记录，因此您需要用新页面内容替换现有页面内容，就像 index.html.erb

这是执行此操作的步骤。

1.Create 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 在你的 index.html.erb

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

3.Now 为您的 ajax 请求添加以下行 index.js.erb

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

Rails 中的 ajax/will_paginate 出现 500 内部服务器错误

Getting 500 internal server error with ajax/will_paginate in Rails

javascript

ajax

jquery

ruby-on-rails

will-paginate