Multiple ajaxified rating forms on a single page in rails 3.2

Question

I'm trying to make some modifications to the ajax based rating system tutorial for rails from (http://eighty-b.tumblr.com/post/1569674815/creating-an-ajaxified-star-rating-system-in-rails-3).

The tutorial is fantastic and works, but I'm now trying to have it appear multiple times on one page. I'm certain the error is in the jquery I'm using. No matter what kind of selector I place on the form in the final .submit() statement, only the top form in the dom is ever submitted. I've tried $(this).closest('form').submit(); I've tried adding unique id's to each form, but following the .change(), $(this) grabs the top form. I kind of expected .change() to behave more like .click()

Let me know if more code is needed. Thanks!

.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();
    });        
});

form...

<%=  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 %>

Steve · Accepted Answer

Man this is funny, I just finished doing this in my own app. Here's my jquery (I'm by no means good at writing jquery but this is what I got to work so if there are design errors I'm sorry and please let me know)

// 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();
    });
});

It doesn't sound like you've differentiated your form ids (as patrick said). When I did it, I still only used one partial with the form code inside but I passed in a parameter that allowed the form ids and corresponding label ids to be unique. Also, my code doesn't use the dim_star that the guide wants you to (this was just my personal preference). Let me know if you're stuck on a part.

Multiple ajaxified rating forms on a single page in rails 3.2

Answers (2)

Related Questions