CODEWITHSUNDEEP
jqueryruby-on-rails
Abram
Abram

Reputation: 41954

Jquery Raty star-rating on Rails form

The following line is generated by jquery in the DOM when a user clicks to make a 5 star rating:

<input type="hidden" name="review[answer01]" id="review_answer01" value="5">

Somehow my controller is not picking up this value for params[:review][:answer01]

It seems to me that when I click the submit button the hidden value isn't being sent at all. Is the form not aware of the hidden field because it's not present at the start? How do I fix this.

Everything worked fine with a simple radio button select.

BTW I manually added the same line of code to my form and it worked. I put 

<%= f.hidden_field :answer01, :value => 5 %>

which produced html:

<input id="review_answer01" name="review[answer01]" type="hidden" value="5">

I just don't get it...

EDIT:

Here is the js source Here is the js: https://github.com/wbotelhos/raty/blob/master/js/jquery.raty.js

The input tags are generated by line 62, which I modded slightly to give an ID ( I wasn't sure if that was the issue ).

My line 62: self.score = $('<input />', { type: 'hidden', name: self.opt.scoreName, id: self.opt.scoreId}).appendTo(self);

I also added scoreID : 'blank' to $.fn.raty.defaults {} to provide an option to set ID.

Now, inside my view I have:

<table class='table'>
  <tbody>

  <%= simple_form_for @review, :html => { :multipart => true } do |f| %>

    <td style='width:115px; padding-top:10px;'><div id="s1"></td>
    <td><h3 style = 'padding-bottom:3px;'><%= @questions[0] %></h3></td>

    [...] (repeated for other questions)

  </tbody>
</table>

  <div style='margin-left:80px; margin-top:20px; margin-bottom:200px;' id='subbut'>
    <%= f.button :submit, "Submit Review", :class=>'btn btn-large' %>
  </div>
  <% end %>

<script>
$('#s1').raty({
    scoreName : 'review[answer01]',
    scoreId : 'review_answer01'
});
</script>

What I see in firebug DOM analysis with 5/5 star selected:

<td style="width:115px; padding-top:10px;">
<div id="s1" style="cursor: pointer; width: 100px; ">
  <img src="/assets/star-on.png" alt="1" title="bad">&nbsp;
  <img src="/assets/star-on.png" alt="2" title="poor">&nbsp;
  <img src="/assets/star-on.png" alt="3" title="regular">&nbsp;
  <img src="/assets/star-on.png" alt="4" title="good">&nbsp;
  <img src="/assets/star-on.png" alt="5" title="gorgeous">
  <input type="hidden" name="review[answer01]" id="review_answer01" value="5">
</div>
</td>

FORM TAG:

<form accept-charset="UTF-8" action="/reviews" class="simple_form new_review" enctype="multipart/form-data" id="new_review" method="post" novalidate="novalidate"></form>

Upvotes: 1

Views: 2217

Answers (1)

F&#233;lix Saparelli
F&#233;lix Saparelli

Reputation: 8749

Your HTML structure isn't right... Look:

<table class='table'>
  <tbody>

  <%= simple_form_for @review, :html => { :multipart => true } do |f| %>

    <td style='width:115px; padding-top:10px;'><div id="s1"></td>
    <td><h3 style = 'padding-bottom:3px;'><%= @questions[0] %></h3></td>

    [...] (repeated for other questions)

  </tbody>
</table>

  <div style='margin-left:80px; margin-top:20px; margin-bottom:200px;' id='subbut'>
    <%= f.button :submit, "Submit Review", :class=>'btn btn-large' %>
  </div>
  <% end %>

The form starts inside the table, but ends outside. this will cause the HTML to be parsed as not including all the inputs and some general weirdness because the browser can't figure out what you meant.

Incidentally, using HAML would circumvent that kind of problems, but to each his own :)

Upvotes: 1

Related Questions