Getting 500 internal server error with ajax/will_paginate in Rails

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 (i.e. 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 );

It looks like you are rendering `event` partial in `index.js.erb` and not passing any local variable. Secondly you need to move all of the `index.html.erb` in a separate partial and render that partial in both `index.js.erb` & `index.html.erb` — Qaisar Nadeem, Sep 22 '16 at 17:49
everything in `index.html.erb`? Or just the code inside the `if @events.... end`? — saml, Sep 22 '16 at 17:57

score 0 · Accepted Answer · answered Sep 22 '16 at 18:37

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') %>");

Getting 500 internal server error with ajax/will_paginate in Rails

1 Answers1