Star Rating System is Only Updating First Item on the List

问题

I've implemented a Star Rating System using this tutorial http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-in-rails-3

Everything works in the SHOW PAGE, But in the INDEX PAGE, For some reason the Javascript only updates the first Book in the INDEX PAGE. And when I click other Book Ratings, it still only Updates the First Book.

Another thing that I find odd is that the code only works in the Index Page when I am not using the CSS to hide the radio buttons and replace them with Stars.

New to rails please help :)

JAVASCRIPT

rating_ballot.js

### Sets up the stars to match the data when the page is loaded. 
$(function () {
  $('form.rating_ballot').each(function() {
    var $form = $(this),
          checkedInput = $form.find('input:checked');

    checkedInput.prevAll().andSelf().addClass('bright');
  });
});

$(document).ready(function() {

    ### Makes stars glow on hover.
  $('form.rating_ballot > label').hover(
    function() {    // mouseover
        $(this).prevAll().andSelf().addClass('glow');
    },function() {  // mouseout
        $(this).siblings().andSelf().removeClass('glow');
  });

  ### Makes stars stay glowing after click.
  $('form.rating_ballot > label').click(function() {
    $(this).siblings().removeClass("bright");
    $(this).prevAll().andSelf().addClass("bright");
  });


  ### Submits the form & saves data. (But only does it to the first Book)

  $(document).on('change', '.rating_button', function(){
    $(this).parent().submit();
  });
});

CSS.SCSS

### The code doesn't work when i hide the radio buttons to display stars

form.rating_ballot input.rating_button { display: none; }

form.rating_ballot label.rating { cursor: pointer; display: block; height: 20px; width: 20px; float: left; }
form.rating_ballot label.rating span { display: none; }
form.rating_ballot label.rating { background-image:  image-url('star-dim.png'); }
form.rating_ballot label.rating.bright { background-image:  image-url('star-bright.png'); }
form.rating_ballot label.rating.glow { background-image:  image-url('star-glow.png'); }

VIEWS

show.html.erb (show)

<div id="book_<%= @book.id %>">
 <div id="rating">
   <%= render :partial => 'ratings/rating', :locals =>{:book => @book} %>
 </div>
</div>

index.hrml.erb (books)

<% @books.each do |book| %>
  <table id="book_<%= book.id %>">
    <tbody>  
      <tr>  
        <td>
          <%= book.title %>
        </td> 
      </tr> 

      <tr>

        <td  id="rating">                   
          <%= render :partial => 'ratings/rating', :locals =>{:book => book} %>
        </td>

      </tr>
    <tbody>
  </table>
<% end %>

_rating.html.erb

<%= form_for(rating_ballot(book.id), :html => { :class => 'rating_ballot' }, remote: true ) do |f| %>

  <%= f.label("value_1", content_tag(:span, '1'), {:class=>"rating", :id=>"1"}) %>
  <%= radio_button_tag("rating[value]", 1, current_user_rating(book.id) == 1, :class => 'rating_button') %>

  <%= f.label("value_2", content_tag(:span, '2'), {:class=>"rating", :id=>"2"}) %>
  <%= radio_button_tag("rating[value]", 2, current_user_rating(book.id) == 2, :class => 'rating_button') %>

  <%= f.label("value_3", content_tag(:span, '3'), {:class=>"rating", :id=>"3"}) %>
  <%= radio_button_tag("rating[value]", 3, current_user_rating(book.id) == 3, :class => 'rating_button') %>

  <%= f.label("value_4", content_tag(:span, '4'), {:class=>"rating", :id=>"4"}) %>
  <%= radio_button_tag("rating[value]", 4, current_user_rating(book.id) == 4, :class => 'rating_button') %>

  <%= f.label("value_5", content_tag(:span, '5'), {:class=>"rating", :id=>"5"}) %>
  <%= radio_button_tag("rating[value]", 5, current_user_rating(book.id) == 5, :class => 'rating_button') %>

  <%= hidden_field_tag("book_id", book.id) %>
  <%= f.submit :Submit, style: "display: none" %>
<% end %>

create.js.erb & update.js.erb

$('#book_<%= @book.id%> #rating').html("<%= escape_javascript(render :partial => 'ratings/rating', :locals => {:book => @book}) %>");

CONTROLLER

class RatingsController < ApplicationController
  before_filter :current_user, only: [:create, :update]

  respond_to :html, :js

  def create
    @book = Book.find_by_id(params[:book_id])
    @rating = Rating.create(params[:rating])    
    @rating.book_id = @book.id
    @rating.user_id = current_user.id
    if @rating.save
      respond_to do |format|
        format.js
        format.html { redirect_to :back }
      end
    end
  end

  def update
    @book = Book.find_by_id(params[:book_id])
    @rating = current_user.ratings.find_by_book_id(@book_id)
    if @rating.update_attributes(params[:rating])
      respond_to do |format|
        format.js
        format.html { redirect_to :back }
      end
    end
  end

end

HELPERS

module BooksHelper

  def rating_ballot(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
        @rating
    else
        current_user.ratings.new
    end
  end

  def current_user_rating(book_id)
    if @rating = current_user.ratings.find_by_book_id(book_id)
       @rating.value
    end
  end

end

HTML CODE IN DEVELOPER TOOLS

index.html.erb

###Before I open a Table

<table class="table id="book_574">_</table>
<table class="table id="book_575">_</table>
<table class="table id="book_576">_</table>

###After I open a the First Two Table

<table class="table id="book_574">
  <tbody>
    <tr>
      <td> TITLE </td>
    </tr>

    <tr>
      <td id="rating">
        <form accept-charset="UTF-8" action="/ratings/1090" class="simple_form rating_ballot"
        data-remote="true" id="edit_rating_1090" method="post">

        <div style="margin:0;padding:0;display:inline">
          <input name="utf8" type="hidden" value="✓">
          <input name="_method" type="hidden" value="put">
          <input name="authenticity_token" type="hidden" value="JjueXU5L/l3qgl8y1CHBEvJWrgJ2DDfN712gGH6ciBM=">
        </div>

        <input class="rating_button" id="rating_value_1" name="rating[value]" type="radio" value="1">
        <label class="rating" for="rating_value_1" id="1"><span>1</span></label>

        <input class="rating_button" id="rating_value_2" name="rating[value]" type="radio" value="2">
        <label class="rating" for="rating_value_2" id="2"><span>2</span></label>

        <input checked="checked" class="rating_button" id="rating_value_3" name="rating[value]" type="radio" value="3">
        <label class="rating" for="rating_value_3" id="3"><span>3</span></label>

        <input class="rating_button" id="rating_value_4" name="rating[value]" type="radio" value="4">
        <label class="rating" for="rating_value_4" id="4"><span>4</span></label>

        <input class="rating_button" id="rating_value_5" name="rating[value]" type="radio" value="5">
        <label class="rating" for="rating_value_5" id="5"><span>5</span></label>

        <input id="book_id" name="book_id" type="hidden" value="574">
        <input name="commit" style="display: none" type="submit" value="Submit">
        </form>
      </td>
    </tr>
  </tbody>
</table>

<table class="table id="book_575">
  <tbody>
    <tr>
      <td> TITLE </td>
    </tr>

    <tr>
      <td id="rating">
        <form accept-charset="UTF-8" action="/ratings/1091" class="simple_form rating_ballot"
        data-remote="true" id="edit_rating_1091" method="post">

        <div style="margin:0;padding:0;display:inline" class="bright">
          <input name="utf8" type="hidden" value="✓">
          <input name="_method" type="hidden" value="put">
          <input name="authenticity_token" type="hidden" value="JjueXU5L/l3qgl8y1CHBEvJWrgJ2DDfN712gGH6ciBM=">
        </div>

        <input class="rating_button" id="rating_value_1" name="rating[value]" type="radio" value="1">
        <label class="rating" for="rating_value_1" id="1"><span>1</span></label>

        <input class="rating_button" id="rating_value_2" name="rating[value]" type="radio" value="2">
        <label class="rating" for="rating_value_2" id="2"><span>2</span></label>

        <input class="rating_button" id="rating_value_3" name="rating[value]" type="radio" value="3">
        <label class="rating" for="rating_value_3" id="3"><span>3</span></label>

        <input class="rating_button" id="rating_value_4" name="rating[value]" type="radio" value="4">
        <label class="rating" for="rating_value_4" id="4"><span>4</span></label>

        <input checked="checked" class="rating_button" id="rating_value_5" name="rating[value]" type="radio" value="5">
        <label class="rating" for="rating_value_5" id="5"><span>5</span></label>

        <input id="book_id" name="book_id" type="hidden" value="575">
        <input name="commit" style="display: none" type="submit" value="Submit">
        </form>
      </td>
    </tr>
  </tbody>
</table>

回答1:

Surely this is the problem:

$(this).parents('form:first').submit();

If you've got to call :first, it means you're calling multiple elements, which is likely why you're only getting the first one submitted

You need to select individual forms, based on the buttons you're clicking

I would try this:

  $(document).on('change', '.rating_button', function(){
    $(this).parent().submit();
  });

回答2:

A couple of things are wrong with this code:

$('#issue<%= @issue.id%> #rating')

First, you can only have one element with any given ID. Looks like multiple elements on your page share the same ID of #rating. Now the jQuery $(...) selector might only return the first #rating rather than all of them. Try naming your #ratings to #rating-1, etc. similar to the #issue elements.

Also isn't the ID of issues formatted as #issue_1, #issue_2, etc.? $('#issue<%= @issue.id%> ... won't render the underscore.

回答3:

Finally found the solution :)

<% sfx = "value_#{book.id}_1" %>
<%= f.label(sfx, content_tag(:span, '1'), :class => "rating") %>
<%= radio_button_tag("rating[value]", 1, current_user_rating(book.id) == 1, :class => 'rating_button', :id => "rating_#{sfx}") %>

来源：https://stackoverflow.com/questions/20847977/star-rating-system-is-only-updating-first-item-on-the-list

标签

javascript

jquery

css

ruby-on-rails

rating-system