javascript - Ajaxified 星级评分系统未正确更新

Question

我使用本教程实现了一个星级评级系统 http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-in-rails-3

Ajax 工作得很好，直到我添加了在给定用户进行更改后提交表单/保存数据的 Javascript。

由于某种原因，它将循环遍历索引页上的所有元素，并在所选对象上提交正确的整数值，但随后在其余对象上提交一堆 NIL 值。我只希望它更新那个对象。

(如何在 Javascript 中提交适当的图书 ID？)

刚接触 Rails，请帮忙:)

观点

index.hrml.erb(书籍)

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

          <td  id="rating">     #####This is my partial for my form                 
            <%= render :partial => 'ratings/rating', :locals =>{:book => book} %>
          </td>

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

_Rating.html.erb

  Avg. Rating <%= book.average_rating %>

<%= form_for rating_ballot, :html => { :class => 'rating_ballot' }, :remote => true do |f| %>
<%= render 'shared/error_messages', object: f.object %>

   <%= f.label("value_1", content_tag(:span, '1'), {:class=>"rating", :id=>"1"}) %>
   <%= radio_button_tag("rating[value]", 1, current_user_rating == 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 == 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 == 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 == 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 == 5, :class => 'rating_button') %>

   <%= hidden_field_tag("book_id", book.id) %>
   <%= f.submit "Submit", class: "btn btn-primary"%>

<% end %>

创建.js.erb 和更新.js.erb

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

JAVASCRIPT

评级_ballot.js

####This Submits the Radio Button, but Loops through every Book on the page. 

$(document).ready(function() {

    ###Submits the form (saves data) after user makes a change.

    $('.rating_ballot').change(function() {
    $('.rating_ballot').submit();
  });
});

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

Answer 1

这是因为每当任何单个评级发生更改时，都会提交所有评级表格如下更改 JS 代码

$(document).ready(function() {
  $('.rating_button').change(function() {
    $(this).parents('form:first').submit();
  });
});

上面的代码在 JS 加载的内容中也不起作用。即，一旦您添加评级并且该表单从 create.js.erb 或 update.js.erb 更新，您的评级表单将不会提交

更改为

$(document).ready(function() {
  $(document).on('change', '.rating_button', function(){
    $(this).parents('form:first').submit();
  });
});