Jquery/AJAX error => xhr.send( ( options.hasContent && options.data ) || null );

Question

I am implementing a star rating system which belong to users, a comment, and a product. I've been using the tutorial here.

I have been getting a problem in my console saying:

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

This happens when I click on a star in my product/show page. Nothing happens on the page and the browser console first gives me a 500 error then says that XHR finished loading: "POST":

POST http://localhost:3000/ratings/9.json 500 (Internal Server Error) jquery.js?body=1:9632send jquery.js?body=1:9632jQuery.extend.ajax jquery.js?body=1:9177(anonymous function) ratings.js?body=1:26jQuery.event.dispatch jquery.js?body=1:4642elemData.handle jquery.js?body=1:4310
XHR finished loading: POST "http://localhost:3000/ratings/9.json". jquery.js?body=1:9632send jquery.js?body=1:9632jQuery.extend.ajax jquery.js?body=1:9177(anonymous function) ratings.js?body=1:26jQuery.event.dispatch jquery.js?body=1:4642elemData.handle

I don't think it is a cross domain error, since I'm running this in my local environment. Also, I added dataType = 'JSONP' to the AJAX call and it still didn't work. Does this mean that it failed and then worked? Very confused by that.

Here is my Products/show.html.erb page:

 <!--Rating system -->
  <% form_id = "product_#{@product.id}_rating" %>
    <% if user_signed_in? %> <!-- To avoid throwing an exception if no user is signed in -->
      <% user_id = user_signed_in? ? current_user.id : "-1" %>
    <% else %>
      <% user_id = -1 %>
    <% end %>
    <h4>Add a rating:</h4>        
    <%= form_for @product.ratings.find_or_create_by(user_id: user_id), :html => {:id => form_id, :class => "star_rating_form"} do |f| %>
        <%= f.hidden_field :product_id, :value => @product.id %>
        <% if user_signed_in? %>
            <%= f.hidden_field :user_id, :value => current_user.id %>
        <% end %>        
        <%= f.hidden_field :score, :id => form_id + "_stars" %>
    <% end %>
    <% (1..5).each do |i| %>
      <li class="rating_star" id="<%= form_id %>_<%= i %>" data-stars="<%= i %>" data-form-id="<%= form_id %>"></li>
    <% end %>
    <br><br>
    <%= link_to "Back", products_path %> | 
    <%= link_to 'Edit', edit_product_path(@product) %>

Here is the ratings.js file:

$(function() {


$('.rating_star').click(function() {
    var star = $(this);
    var form_id = star.attr("data-form-id");
    var stars = star.attr("data-stars");

    function update_stars(){
      $('.star_rating_form').each(function() {
        var form_id = $(this).attr('id');
        set_stars(form_id, $('#' + form_id + '_stars').val());
      });
    }

    function set_stars(form_id, stars) {
      for(i = 1; i <= 5; i++){
        if(i <= stars){
          $('#' + form_id + '_' + i).addClass("on");
        } else {
          $('#' + form_id + '_' + i).removeClass("on");
        }
      }
    }

    $('#' + form_id + '_stars').val(stars);

    $.ajax({
      type: "post",
      url: $('#' + form_id).attr('action') + '.json',
      data: $('#' + form_id).serialize(),
      success: function(response){
        console.log(response);
        update_stars();
        if(response["avg_rating"]){
          $('#average_rating').text(response["avg_rating"]);
          }
        }
      })
  });        
});

The ratings controller:

class RatingsController < ApplicationController
 def create
    @rating = Rating.new(params[:rating])
    @product = Product.find(params[:rating][:product_id])

    respond_to do |format|
      if @rating.save
        format.json { render :json => { :avg_rating => @product.avg_rating } }
      else
        format.json { render :json => @rating.errors, :status => :unprocessable_entity }
      end
    end
  end

  def update
    @rating = Rating.find(params[:id])
    @product = Product.find(params[:rating][:product_id])
    @comment = @rating.comment
    @rating.update_attributes(params[:rating])

    respond_to do |format|
      if @rating.save
        format.json { render :json => { :avg_rating => @product.avg_rating } }
      else
        format.json { render :json => @rating.errors, :status => :unprocessable_entity }
      end
    end
  end

  def rating_params
    params.require(:rating).permit(:score)
  end
end

The ratings model:

class Rating < ActiveRecord::Base
  belongs_to :comment
  belongs_to :user
  belongs_to :product
end

The products model:

class Product < ActiveRecord::Base
  belongs_to :user
  has_many :comments, dependent: :destroy
  has_many :ratings
  validates :title, presence: true,
                    length: { minimum: 5, maxmimum: 140 }
  validates :price, presence: true
  validates :description, presence: true,
                  length: { minimum: 5 }

  def avg_rating
    average_rating = 0.0
    count = 0
    ratings.each do |rating| 
      average_rating += rating.score
      count += 1
    end

    if count != 0
      (average_rating / count)
    else
      count
    end
  end

end

and finally, the css for the rating stars (there is only 1 image which contains a filled in star and empty star taken from the tutorial that I referenced above.

li.rating_star {
  float:left;
  list-style: none;
  margin: 0;
  padding: 0; 
  width: 25px;
  height: 25px;
  background: asset-url('star.png', image) top left;
} 

li.rating_star.on {
  background: asset-url('star.png', image) 0 -25px;
} 

Thank you for the help in advance everyone.