[RUBY] [Rails] Create an evaluation function using raty.js

It is a method to implement the evaluation function with a star image in the rails application using raty.js. You need jquery.

 2021-01-18 21.35.22.png


$ rails -v

Introduced jquery


gem 'jquery-rails'
$ bundle install


//= require jquery

Create jquery.raty.js

$ touch app/assets/javascripts/jquery.raty.js

Copy and paste the description in https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js to the created file. Then require in application.js (write after jquery)


//= require jquery.raty.js

Place the image of the star

Download star-on.png, star-off.png, star-half.png from https://github.com/wbotelhos/raty/tree/master/lib/images and app Placed under/assets/images.

Create data with columns to store evaluations

$ rails g migration addEvaluationToMovie evaluation:float


class AddEvaluationToMovie < ActiveRecord::Migration[5.2]
  def change
    add_column :movies, :evaluation, :float
$ rails db:migrate

Create evaluation posting screen

This time, as an example, let's make it possible to post the evaluation together on the screen for posting the title of your favorite movie.


<h2>Post your favorite movie</h2>
<%= form_with(model: movie, local: true) do |form| %>
    <%= form.label :title %>
    <%= form.text_field :title %>
  <div id="evaluate_stars">
  <div class="actions">
    <%= form.submit %>
<% end %>
    starOn: "<%= asset_path('star-on.png') %>",
    starOff: "<%= asset_path('star-off.png') %>",
    starHalf: "<%= asset_path('star-half.png') %>",
    scoreName: 'movie[evaluation]' //Describe the model name and column name to be registered


def movie_params
  params.require(:movie).permit(:title, :evaluation) #Added evaluation

View posted ratings

Here, as an example, the evaluation is displayed on the index page.


<h1>Movie list</h1>
    <% @movies.each do |movie| %>
        <td><%= movie.title %></td>
        <td class="movie-evaluation" data-score="<%= movie.evaluation %>"></td>
    <% end %>
    readOnly: true,
    score: function() {
      return $(this).attr('data-score');
    path: '/assets/'


Recommended Posts

[Rails] Create an evaluation function using raty.js
[Rails] Create an application
Create authentication function in Rails application using devise
Create an EC site with Rails 5 ⑩ ~ Create an order function ~
Search function using [rails] ransack
[Rails] Test of star evaluation function using Raty [Rspec]
Create an EC site with Rails 5 ⑨ ~ Create a cart function ~
Ajax bookmark function using Rails
[Rails 6] Star-shaped review using Raty.js
[Rails] Create an echo bot using the LINE Messaging API.
[Rails] Create an email sending function with ActionMailer (complete version)
User evaluation using the like function
[Rails] Tag management function (using acts-as-taggable-on)
Create pagination function with Rails Kaminari
Create a filtering function using acts-as-taggable-on
[Implementation procedure] Create a user authentication function using sorcery in Rails
Rails Tutorial Extension: I tried to create an RSS feed function
[Rails withdrawal] Create a simple withdrawal function with rails
Create an or search function with Ransack.
Multiple image upload function using Rails Carrierwave
Create a login function using Swift's Optional
Nuxt.js × Create an application in Rails API mode
[Rails 6] Implementation of inquiry function using Action Mailer
[Rails] How to create a graph using lazy_high_charts
[Rails] Implementation of image enlargement function using lightbox2
Create an EC site using stripe! (Account creation)
[Rails 6] Ranking function
Implement star rating function using Raty in Rails6
[Rails] Category function
[Rails] I made a draft function using enum
Rails follow function
Create an app by specifying the Rails version
Rails6.0 ~ How to create an eco-friendly development environment
[Note] Summary of rails login function using devise ①
Create an EC site with Rails5 ⑤ ~ Customer model ~
[Rails] Notification function
Create an EC site with Rails5 ⑦ ~ Address, Genre model ~
Create an EC site with Rails5 ④ ~ Header and footer ~
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
Create an EC site with Rails5 ⑥ ~ seed data input ~
[Rails] Implementation of multi-layer category function using ancestry "seed"
[Rails] Create sitemap using sitemap_generator and deploy to GAE
Rails learning How to implement search function using ActiveModel
Create a login authentication screen using the session function
Try to implement tagging function using rails and js
[Rails] Implement search function
[Rails] Implemented hashtag function
[rails] tag ranking function
Rails search function implementation
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
Add an icon to the header link using Rails fontawesome
Ruby on Rails Email automatic sending function setting (using gmail)
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
[Rails DM] Let's create a notification function when DM is sent!
[Rails] Implementation of tagging function using intermediate table (without Gem)
[Rails] Implement event end function (logical deletion) using paranoia (gem)
[Rails] I tried to implement "Like function" using rails and js
[Rails] Implement community membership application / approval function using many-to-many associations