Question

我正在尝试对基于ajax的评级系统教程进行一些修改（http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-在护栏-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（正如帕特里克所说）。当我这样做时，我仍然只使用了一个带有表单代码的部分，但我传入了一个参数，允许表单ID和相应的标签ID是唯一的。此外，我的代码不使用指南要求你的dim_star（这只是我个人的偏好）。如果你被困在一个部分，请告诉我。

在rails 3.2中的单个页面上形成多个ajaxified评级表

2 个答案: