Search code examples
jqueryruby-on-railsratingraty

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

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.

enter image description here

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.

enter image description here

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.

Solution

  • 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