rails 3.2中单个页面上的多个ajaxified评级表格

Question

我正在尝试对来自 (http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system- 的 Rails 的基于 ajax 的评分系统教程进行一些修改in-rails-3)。

本教程非常棒且有效，但我现在正试图让它在一个页面上出现多次。我确定错误出在我正在使用的 jquery 中。无论我在最终的 .submit() 语句中将哪种选择器放在表单上，​​都只会提交 dom 中的顶部表单。我试过 $(this).closest('form').submit();我已经尝试为每个表单添加唯一的 id，但是在 .change() 之后，$(this) 获取了最上面的表单。我有点期望 .change() 的行为更像 .click()

如果需要更多代码，请告诉我。谢谢！

.js...

// Sets up the stars to match the data when the page is loaded.
$(function () {
    var checkedId = $('form.rating_ballot > input:checked').attr('id');
    $('form.rating_ballot > label[for=' + checkedId + ']').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) after user makes a change.
        $('form.rating_ballot').change(function() {
        $('form.rating_ballot').submit();
    });        
});

表格...

<%=  content_for(:rating_scripts) do      %>
<%= javascript_include_tag 'rating_ballot' %> 
<% end %>                          




<%= form_for(rating_ballot, :remote => true, :html => { :class => 'rating_ballot', :id => 'rating-form-' + audition.id.to_s }) do |f| %>
    <%= 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("audition_id", audition.id)    %>
           <%= f.submit :Submit, {:id=>"submit"} %>
<% end %> 

Answer 1

我猜表单 ID 不是唯一的。查看您的代码，它看起来好像这一行：

<%= form_for(rating_ballot, :remote => true, :html => { :class => 'rating_ballot', :id => 'rating-form-' + audition.id.to_s }) do |f| %>

应该使用 rating_ballot 记录的 id 而不是试镜 id 可能吗？在浏览器中查看呈现页面的源代码并验证每个表单的 id 是唯一的。

Answer 2

伙计，这很有趣，我刚刚在自己的应用程序中完成了这项工作。这是我的 jquery（我不擅长编写 jquery，但这是我要工作的，所以如果有设计错误，我很抱歉，请告诉我）

// Sets up the stars to match the data when the page is loaded.
$(function () {
    $.renderOldVote = function() { // name function so it can be called after mouseout
        var checkedId1 = $('form.people > input:checked').attr('id');
        var checkedId2 = $('form.music > input:checked').attr('id');
        var checkedId3 = $('form.venue > input:checked').attr('id');
        var checkedId4 = $('form.atmosphere > input:checked').attr('id');
        $('form.people > label[for=' + checkedId1 + ']').prevAll().andSelf().addClass('checked');
        $('form.music > label[for=' + checkedId2 + ']').prevAll().andSelf().addClass('checked');
        $('form.venue > label[for=' + checkedId3 + ']').prevAll().andSelf().addClass('checked');
        $('form.atmosphere > label[for=' + checkedId4 + ']').prevAll().andSelf().addClass('checked');
    };
    $.renderOldVote();
});

$(document).ready(function() {
    // Makes stars glow on hover.
    $('form.people > label,form.music > label,form.venue > label,form.atmosphere > label').hover(
        function() {    // mouseover
            $(this).siblings().andSelf().removeClass('checked');
            $(this).prevAll().andSelf().addClass('glow');
            },
        function() {  // mouseout
            $(this).siblings().andSelf().removeClass('glow');
            $.renderOldVote();
        }
    );
    // Makes stars stay glowing after click.
    $('form.people > label,form.music > label,form.venue > label,form.atmosphere > label').click(function() {
        $(this).siblings().removeClass("checked");
        $(this).prevAll().andSelf().addClass("checked");
    });
    // Submits the form (saves data) after user makes a change.
    $('form.people').change(function() {
        $('form.people').submit();
    });
    $('form.music').change(function() {
        $('form.music').submit();
    });
    $('form.venue').change(function() {
        $('form.venue').submit();
    });
    $('form.atmosphere').change(function() {
        $('form.atmosphere').submit();
    });
});

听起来您并没有区分您的表单 ID（正如 patrick 所说）。当我这样做时，我仍然只使用了其中的一部分表单代码，但我传入了一个参数，该参数允许表单 ID 和相应的标签 ID 是唯一的。此外，我的代码没有使用指南希望您使用的 dim_star（这只是我个人的偏好）。如果您遇到困难，请告诉我。