1

I am new to JavaScript and Jquery as a front-end for Rails, and I am having trouble getting my next button on my show page to load the next object. Can anyone take a look and see where I may be going wrong? Thanks in advance! Here is the relevant code:

show.html.erb

<%= render 'layouts/header' %>

<% if @car %>
  <a href="#" class="js-next" data-id="<%=@car.id%>">Next Car</a>
  <h1 class="carMake"><%= @car.make %></h1>
  <h1 class="carModel"><%= @car.model %></h1>
  <p class="carYear"><%= @car.year %></p>
  <p class="carColor"><%= @car.color %></p>
<% end %>

<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
  $(".js-next").click(function(event) {
    event.preventDefault();
    var nextId = parseInt($(".js-next").attr("data-id")) + 1;
    $.get("/cars/" + nextId + ".json", function(data) {
      $(".carMake").text(data["make"]);
      $(".carModel").text(data["model"]);
      $(".carYear").text(data["year"]);
      $(".carColor").text(data["color"]);
      // re-set the id to current on the link
      $(".js-next").attr("data-id", data["id"]);
    });
  });
});
</script>

Show method in cars controller 

  def show
    @car = Car.find(params[:id])
    respond_to do |format|
      format.html {render :show}
      format.json {render json: @car}
    end
  end

car serializer 

class CarSerializer < ActiveModel::Serializer
  attributes :id, :make, :model, :color, :year
end

Terminal response when I click on next 

Started GET "/cars/8" for 127.0.0.1 at 2018-03-09 12:17:24 -0700
Processing by CarsController#show as HTML
  Parameters: {"id"=>"8"}
  Car Load (0.2ms)  SELECT  "cars".* FROM "cars" WHERE "cars"."id" = ? LIMIT ?  [["id", 8], ["LIMIT", 1]]
  CACHE Car Load (0.0ms)  SELECT  "cars".* FROM "cars" WHERE "cars"."id" = ? LIMIT ?  [["id", 8], ["LIMIT", 1]]
  Rendering cars/show.html.erb within layouts/application
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
  Rendered layouts/_header.html.erb (6.5ms)
  Rendered cars/show.html.erb within layouts/application (13.7ms)
Completed 200 OK in 265ms (Views: 260.4ms | ActiveRecord: 0.7ms)

Please let me know if any other code snippets would be helpful in diagnosing the problem. Thanks!

Chris
  • 33
  • 5
  • you've verified the "next" record is returned? `console.log(data);` within your click handler please. – Randy Casburn Mar 09 '18 at 19:43
  • can you change from **parseInt($(".js-next").attr("data-id"))** to **parseInt($(this).attr("data-id"))** and test? – gaetanoM Mar 09 '18 at 19:45
  • @RandyCasburn when you say click handler, do you mean within the browser itself? I tried that and received these errors: Uncaught ReferenceError: $ is not defined, Uncaught ReferenceError: data is not defined – Chris Mar 09 '18 at 20:06
  • @gaetanoM when I made that replacement and I got the same error :/ – Chris Mar 09 '18 at 20:06
  • I appreciate the help guys, very new at this so I apologize for that – Chris Mar 09 '18 at 20:07
  • Is the log really corresponding to pressing the next link? It is rendering show.html, not json. – Pablo Mar 09 '18 at 20:16

2 Answers2

0

Some improvements: store the next-id in the next link.

<a href="#" class="js-next" data-next-id="<%= @car.id + 1 %>">Next Car</a>

Script:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function () {
    $(".js-next").click(function(event) {
      event.preventDefault();
      var nextId = $(this).attr("data-next-id")
      $.getJSON("/cars/" + nextId, function(data) {
        // etc...
      });
    });
  });
</script>
Pablo
  • 3,004
  • 1
  • 12
  • 19
  • Thanks for the help, Pablo! I found out that I was not loading jquery in the correct order. I found the answer to my problem here: https://stackoverflow.com/questions/21190580/uncaught-referenceerror-is-not-defined-error-in-jquery – Chris Mar 09 '18 at 20:39
0

Found the answer to my issue here:

Uncaught ReferenceError: $ is not defined error in jQuery

rookie mistake on my part, really appreciate the help guys!

Chris
  • 33
  • 5