Building a Star-Rating System in Ruby on Rails with jQuery

### Specification

  • Clicking a star rating turns on the stars to the left of the star I clicked.
  • Clicking a star submits the star rating.
  • When I refresh the page, the star ratings should be persistent. We’ll be using Rails’ functions including:
  • form_for
  • hidden_field
  • Rails Helpers We’ll be using jQuery functions including:
  • click
  • each
  • ajax <code> <% form_id = "movie_#{movie.id}_rating" %> <%= form_for movie.ratings.last || movie.ratings.build, :html => {:id => form_id , :class => "star_rating_form"} do |f| %> <%= f.hidden_field :movie_id %> <%= f.hidden_field :stars, :id => form_id + "_stars" %> <% end %> <% (1..5).each do |i| %> <li id="<%= form_id %>_<%= i %>" data-stars="<%= i %>" data-form-id="<%= form_id %>"></li> <% end %> </code> <code> var set_stars = function(form_id, stars) { for(i=1; i <= 5; i++){ if(i <= stars){ $('#' + form_id + '_' + i).addClass("on"); } else { $('#' + form_id + '_' + i).removeClass("on"); } } } $(function() { $('.rating_star').click(function() { var star = $(this); var form_id = star.attr("data-form-id"); var stars = star.attr("data-stars"); $('#' + form_id + '_stars').val(stars); $.ajax({ type: "post", url: $('#' + form_id).attr('action'), data: $('#' + form_id).serialize() }) }); $('.star_rating_form').each(function() { var form_id = $(this).attr('id'); set_stars(form_id, $('#' + form_id + '_stars').val()); }); }); </code>

Sign up for the Newsletter

Join our newsletter and get updates in your inbox. We won’t spam you and we respect your privacy.