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

Question

我构建了一个卡片滑块，其中每页加载 20 张卡片。 我正在尝试使用它，以便当用户单击最后一张卡片（索引为 19 的卡片）上的按钮时，会进行 AJAX 调用以呈现下一页并将我原来的 20 张卡片替换为接下来的 20 张卡片。我正在使用 will_paginate gem，我可以为下一页提取正确的 href（即http://localhost:3000/events/queued?page=2 ）。 但是当我向它发出 get 请求时，控制台显示错误“加载资源失败：服务器响应状态为 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 %>

事件.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.为您的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.现在在你的index.html.erb

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

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

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