Implement star evaluation function in Rails 6 (Webpacker is installed as standard)

Introduction

Since the handling of JavaScript has changed from Ruby on Rails 6.0 released in August 2019, I would like to introduce "jQuery Raty --A Star Rating Plugin" based on the changes (stumbling points).

environment

--Language (Ruby 2.6.5) --Framework (Rails 6.0.3.3)

reference

Implementation

Introduction of jQuery

First, install jQuery with Yarn.

yarn add jquery

When managing with Webpacker, use the Node.js package.

Next, in the webpacker configuration file, describe how to add jQuery under management.

config/webpack/environment.js


const { environment } = require('@rails/webpacker')
#Postscript
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery',
  })
)
#So far
module.exports = environment

Finally, call jQuery.

app/javascript/packs/application.js


require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery') #Postscript

Introducing jQuery Raty

Save the image and code locally from the site below. https://github.com/wbotelhos/raty --app / assets / images directory - Image: https://github.com/wbotelhos/raty/tree/master/lib/images --Create a new js file with any name under app / javascript (this time "raty.js") - Code: https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js

Invitation of jQuery Raty

As before, add the newly created js file.

app/javascript/packs/application.js


require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require('raty') #Postscript

At this point, the function settings are complete.

Description in View file

After that, write as follows to any View file you want to implement.

    <div class="note note-rating", id="star">
      <h3>Comprehensive evaluation</h3>
    </div>
    <script>
      $('#star').raty({
        size      : 36,
        starOff   : '<%= asset_path('star-off.png') %>',
        starOn    : '<%= asset_path('star-on.png') %>',
        starHalf  : '<%= asset_path('star-half.png') %>',
        scoreName : 'note[rating]',
        half      : true,
      });
    </script>

The following two articles are detailed for the description of options and display.

Summary

It was almost the first time to introduce jQuery in Rails, so even if I found the function I wanted to implement, I could not introduce it. Since Rails6 or later, Webpacker (a tool for managing JavaScript collectively) is installed as standard, so in order to implement it as you want, you have to learn how to implement it and each file that Rails is composed of. I felt it was necessary.

Recommended Posts

Implement star evaluation function in Rails 6 (Webpacker is installed as standard)
Implement star rating function using Raty in Rails6
Implement application function in Rails
Implement follow function in Rails
Implement simple login function in Rails
Implement CSV download function in Rails
Implement post search function in Rails application (where method)
[Rails] Test of star evaluation function using Raty [Rspec]
[Rails] Implement credit card registration / deletion function in PAY.JP
[Rails] Implement search function
Implement user follow function in Rails (I use Ajax) ②
Implement user follow function in Rails (I use Ajax) ①
Implement markdown in Rails
Implement login function in Rails simply by name and password (1)
Implement the same function as C, C ++ system ("cls"); in Java
Implement login function simply with name and password in Rails (3)
Implement user registration function and corporate registration function separately in Rails devise
Implement LTI authentication in Rails
Implement import process in Rails
[Rails] Implement image posting function
[Rails] A simple way to implement a self-introduction function in your profile
I tried to implement Ajax processing of like function in Rails
Add a search function in Rails.
Implement tagging function in form object
Implement PHP implode function in Java
[Solution] Webpacker :: Manifest :: MissingEntryError in Rails
Implement a contact form in Rails
[Rails] How to implement star rating
Data is not registered in Rails.