Rails app not showing raty js plugin

Question

Getting these errors with raty js I am using Rails version 5.0

jquery.raty.self-628421be04f36f7a8fa8b9b884c6d7824d6f8bdeba4f172b131f15aa63f713e8.js?body=1:761 Uncaught ReferenceError: jQuery is not defined
    at jquery.raty.self-628421be04f36f7a8fa8b9b884c6d7824d6f8bdeba4f172b131f15aa63f713e8.js?body=1:761
(anonymous) @ jquery.raty.self-628421be04f36f7a8fa8b9b884c6d7824d6f8bdeba4f172b131f15aa63f713e8.js?body=1:761
2:131 Uncaught TypeError: $(...).raty is not a function
    at 2:131

My code for adding the raty JS plugin is as follows.

<script>
$('.review-rating').raty({
    readOnly: true,
    score: function() {
        return $(this).attr('data-score');
    },
    path: '/assets/'
});

this corresponds with my show.html.erb file showing my reviews partial

<div class="review-rating" data-score="<%= review.rating %>"></div>
<p><%= review.comment %></p>


 <% if user_signed_in? %>

<% if review.user_id == current_user.id %>

<%= link_to "Edit", edit_book_review_path(review.book, review) %>
<%= link_to "Delete", book_review_path(review.book, review), method: :delete, data: {
confirm: "Are you sure?" } %>

<% end %>
<% end %>

jQuery is definitely in the app because I have added it & I am using bootstrap for certain elements which require jQuery which are all working fine.

I have added images for Raty to the app/assets/images path as well as the raty js file to the javascripts folder.

Any insight into why Rails is not reading Raty???

Thank you

Answer 1

Looks like raty library is not loaded but you tried to initialize it. Wrap your code to $(document).ready

$(document).ready(function() {
  $('.review-rating').raty({
      readOnly: true,
      score: function() {
          return $(this).attr('data-score');
      },
      path: '/assets/'
  });
});

Answer 2

I figured it out. First, add this to the top of your application.js file

//= require jquery3
//= require jquery_ujs
//= require jquery.raty

Next, wrap your js code from your show.html.erb view in $(document).ready like so:

$(document).ready(function() {
   $('.review-rating').raty({
   readOnly: true,
   score: function() {
     return $(this).attr('data-score');
   },
   path: '/assets/'
   });
});

Finally, add

<script src="/assets/jquery.js" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js" type="text/javascript"></script>

In your application.html.erb above <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

This should fix the problem, and you should see the review stars!