Rails 5 Star Rating jQuery Plugin Raty doesn't passing rating value

Question

I'm newbie to rails, and I'm using Star Rating jQuery Plugin Raty to do some review / rating things. For now I'm having a list of data that need to be review, and then the ways to review would be in a boostrap modal box, as on picture below.

Everything is working fine, but then when I click submit button (showing save changes) in the picture, I don't receive the rating parameters, the parameters i received are showing as picture below.

The expected result would be include the rating value as well. I've followed the steps to add the jquery.raty in application.js, and allocate the file in vendor/assets/javascripts. Also I've added this javascript code in my file.

<script>
$('#star-rating').raty({
    path: '/assets',
    scoreName: 'review[rating]'
});
</script>

Everything is working fine but just is not passing the rating's value. I've inspected the result and saw that the value is actually saved in a hidden_tag, which is included in the jQuery plugin, but it just isn't passing when I submit my form.

This is my code for table and modal box

<% @appointment.approve_applicants.each_with_index do |applicant, index| %>
  <tr>
    <td><%= index + 1 %></td>
    <td><%= link_to applicant.user.fullname, applicant.user %></td>
    <td><%= link_to "Reviews", applicant.build_review, "data-toggle" => "modal", "data-target" => "#detail#{applicant.id}" %></td>
    <td></td>

    <!--Modal-->
    <div class="modal fade" id="detail<%= applicant.id %>" role="dialog">
      <div class="modal-dialog">
        <!--Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close close_book_detail" data-dismiss="modal">&times;</button>
            <%= form_for(Review.new) do |f| %>
              <%= render 'shared/error_messages', object: f.object %>
              <div class="form-group row">
                <%= f.label :rating, class: 'col-sm-2 form-control-label' %>
                <div class="col-sm-6" id='star-rating'>
                </div>
              </div>
              <%= f.label :comment %>
              <%= f.text_area :comment, placeholder: "Please enter comment here." %>
              <%= f.submit "Save changes", class: "btn btn-primary" %>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </tr>
<% end %>

And below are the HTML for the modal box.

<div class="modal fade" id="detail4" role="dialog">
          <div class="modal-dialog">
            <!--Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close close_book_detail" data-dismiss="modal">&times;</button>

                <form class="new_review" id="new_review" action="/reviews" accept-charset="UTF-8" method=post></form>
                <div class="form-group row">
                <label class="col-sm-2 form-control-label" for="review_rating">Rating</label>
                <div class="col-sm-6" id="star-rating" style="cursor: pointer;">
                  <img alt="1" src="/assets/star-on.png" title="bad">
                  <img alt="2" src="/assets/star-on.png" title="poor">
                  <img alt="3" src="/assets/star-on.png" title="regular">
                  <img alt="4" src="/assets/star-off.png" title="good">
                  <img alt="5" src="/assets/star-off.png" title="gorgeous">

                  <input name="review[rating]" type="hidden" value="3">
                </div>

                <label for="review_comment">Comment</label>
                <textarea placeholder="Please enter comment here." name="review[comment" id="review_comment></textarea>

                <input type="submit" name=commit" value="Save changs" class="tbn btn-primary" data-disable-with="Save changes">
              </div>
            </div>
          </div>
        </div>

Is there any solution to solve this? Thank you in advance.

Hi Vasilisa, I've updated the question, Thank you in advance. Also I've try to insert a review that using link_to redirecting to another page but not using the modal box, then everything is working fine. You have any idea for this? — Kowa JiaLiang, Feb 04 '19 at 16:17
For some reason `form` tag is closing right after it starts, it not includes the form itself. I suppose it is because modal inside the table. `div` and `form` tags are not valid inside `tr` tag. Not sure, how you can solve it — Vasilisa, Feb 04 '19 at 17:02
Yea I noticed it, if i use number_field for the rating, then it will be fine. So i've no idea how to deal with this problem. And the div and form tags are only for the modal box, this is not valid too? — Kowa JiaLiang, Feb 04 '19 at 17:07

Anand · Accepted Answer · 2019-02-04T19:33:55.113

2

Pass target option in raty() to get value of star rating as: -

<script>
  $('#star-rating').raty({
    path: '/assets',
    target     : '#id_of_field_to_pass_star_rating',
    targetType : 'score',
    targetKeep : true
  });
</script>

In modal create a hidden field as: -

<div class="col-sm-6" id='star-rating'>
<%=hidden_field_tag "review[rating]", '', id: "id_of_field_to_pass_star_rating" %>

You can get various options for jquery-raty also ruby gem jquery-raty-rails

edited Feb 04 '19 at 19:33

answered Feb 04 '19 at 18:00

Anand

6,457
3
12
26

Hi Gabbar, I tried your ways but the parameters still doesn't got the value of review[rating]. – Kowa JiaLiang Feb 04 '19 at 19:00
@KowaJiaLiang How did you check it? – Anand Feb 04 '19 at 19:20
i copy the code you gave me, by adding the hidden field and modify the script to your script. Also i've change the .testimonial_grade_rating to my new define name on the div name. After that everything still remain same as just now. Lastly i tried to modify the targetType to targetType: 'review[score]', but none of them work. – Kowa JiaLiang Feb 04 '19 at 19:24
1

@KowaJiaLiang Glad to know that :) – Anand Feb 04 '19 at 19:34

score 0 · Answer 2 · answered Dec 28 '19 at 11:07

This solution passes the raty score value into the hidden form field when a star is clicked.

  <div id="star-rating"></div>
  <%=hidden_field_tag "review[rating]", id: "review_rating" %>
  <script>
    $('#star-rating').raty({
      click: function(score) {
        $('#review_rating').val(score);
      }
    });
  </script>

Rails 5 Star Rating jQuery Plugin Raty doesn't passing rating value

2 Answers2