0

（http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-in-railsからのrailsのajaxベースの評価システムチュートリアルにいくつかの変更を加えようとしています-3）。

チュートリアルは素晴らしく機能しますが、現在、1ページに複数回表示されるようにしています。エラーは私が使用している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 %>
4

2 に答える 2

1

フォームIDは一意ではないと思います。コードを見ると、次の行のように見えます。

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

おそらくオーディションIDではなくrating_ballotレコードのIDを使用する必要がありますか？ブラウザでレンダリングされたページのソースを表示し、各フォームのIDが一意であることを確認します。

于 2012-04-11T22:54:42.020 に答える
0

これはおかしいです、私は自分のアプリでこれをやり終えたところです。これが私の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を区別したようには聞こえません（パトリックが言ったように）。それを行ったとき、フォームコードを内部に含むパーシャルを1つだけ使用しましたが、フォームIDと対応するラベルIDを一意にするパラメーターを渡しました。また、私のコードは、ガイドがあなたに望んでいるdim_starを使用していません（これは私の個人的な好みでした）。あなたが部品で立ち往生している場合は私に知らせてください。

于 2012-04-13T06:28:34.877 に答える