Rails 5 Star Rating jQuery Plugin Raty 没有通过评级值

Posted 2023-05-09

【中文标题】Rails 5 Star Rating jQuery Plugin Raty 没有通过评级值

【英文标题】：Rails 5 Star Rating jQuery Plugin Raty doesn't passing rating value

【发布时间】：2019-06-28 08:43:20

【问题描述】：

我是 Rails 的新手，我正在使用 Star Rating jQuery Plugin Raty 来做一些评论/评级事情。现在我有一个需要审查的数据列表，然后审查的方法将在一个 boostrap 模态框中，如下图所示。

一切正常，但是当我点击图片中的提交按钮（显示保存更改）时，我没有收到评级参数，我收到的参数如下图所示。

预期结果也将包括评分值。我已按照步骤在 application.js 中添加 jquery.raty，并在 vendor/assets/javascripts 中分配文件。我还在我的文件中添加了这个 javascript 代码。

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

一切正常，只是没有通过评级值。我检查了结果，发现该值实际上保存在一个 hidden_​​tag 中，它包含在 jQuery 插件中，但是当我提交表单时它没有通过。

这是我的表格和模态框代码

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

下面是模态框的 html。

<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  src="/assets/star-on.png" title="bad">
                  <img  src="/assets/star-on.png" title="poor">
                  <img  src="/assets/star-on.png" title="regular">
                  <img  src="/assets/star-off.png" title="good">
                  <img  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>

有没有办法解决这个问题？提前谢谢你。

【问题讨论】：

能否添加生成的 html 用于评分输入？

嗨 Vasilisa，我已经更新了问题，提前谢谢你。此外，我尝试插入使用 link_to 重定向到另一个页面但不使用模式框的评论，然后一切正常。你对此有什么想法？

由于某种原因，form 标记在启动后立即关闭，它不包括表单本身。我想这是因为表格里面的模态。 div 和 form 标签在 tr 标签内无效。不知道怎么解决

是的，我注意到了，如果我使用 number_field 进行评分，那就没问题了。所以我不知道如何处理这个问题。而且 div 和 form 标签只适用于模态框，这也无效？

【参考方案1】：

通过raty() 中的target 选项以获得星级值：-

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

在模态中创建一个隐藏字段：-

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

您可以为jquery-raty 以及 ruby​​ gem jquery-raty-rails 获得各种选项

【讨论】：

嗨 Gabbar，我尝试了你的方法，但参数仍然没有获得 review[rating] 的值。

@KowaJiaLiang 你是怎么查到的？

我复制了你给我的代码，通过添加隐藏字段并将脚本修改为你的脚本。此外，我已将 .testimonial_grade_rating 更改为 div 名称上的新定义名称。之后一切都还是和刚才一样。最后我尝试将 targetType 修改为 targetType: 'review[score]'，但它们都不起作用。

@KowaJiaLiang 很高兴知道这一点:)

【参考方案2】：

此解决方案在单击星号时将比率得分值传递到隐藏的表单字段中。

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