I googled to implement a star review
javascripts file
does not exist in app / assets !! ", you lament there! !! !! !! !!The reason why there is no javascripts in assets is
that is
The handling of JavaScript has changed since Ruby on Rails 6.0!
Display the rating with a star mark!
Users can review by clicking the star button!
rails 6.0.3.4
--The model is set as follows.
User model and House model have a many-to-many relationship with the Comment model as an intermediate table
--Save the evaluation value in the star column (type: integer) of the comments table (table for posting reviews).
--Proceed on the assumption that the table and column have already been created.
--If you want to evaluate a column with half a star, you need to make it a float type because you will save values such as "0.5" and "1.5". This time, the evaluation is performed only with integers, so the star column is an integer type.
yarn add jquery
When managing with Webpacker, use the Node.js package.
Caution
When introducing jquery in other articles, use the gem" jquery-rails ", but do not use it in the rails6 environment like this time! !!
The yarn add command will write the version to package.json as well as install the 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`**
```js
abridgement
window.$ = window.jQuery = require('jquery'); #Postscript
https://github.com/wbotelhos/raty/tree/master/lib/images
From github here
star-off.png
star-on.png
Copy and put it in a folder in assets / images.
(Copy star-harf.png if you want to evaluate with half a star)
Create raty.js
in app / javascript / packs
.
Next, copy the js code of the following URL to raty.js
.
https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js
Finally add the following to application.js
app/javascript/packs/application.js
window.$ = window.jQuery = require('jquery');
require('packs/raty') #Postscript
ruby:_form.html.erb
<%= form_for [@house, @comment] do |f| %>
<div class="field">
<div>
<%= f.label :content%>
<%= f.text_field :content %>
</div>
<div>
<%= f.submit button_value %>
</div>
<div class="form-group row" id="star">
<%= f.label :star,'Evaluation', class:'col-md-3 col-form-label' %>
<%= f.hidden_field :star, id: :review_star %>
</div>
<!--Rating javascript-->
<script>
$('#star').raty({
size : 36,
starOff: '<%= asset_path('star-off.png') %>',
starOn : '<%= asset_path('star-on.png') %>',
scoreName: 'comment[star]',
half: false,
});
</script>
<% end %>
--Comment Save the value in the star column of the model
scoreName: 'comment[star]'
-Do not enter half of ⭐️!
half: false,
Describe the following in the view that you want to evaluate by stars
<h1>Review list</h1>
<%= link_to 'Post a review', new_house_comment_path(house_id: params[:house_id]) %>
<% @comments.each do |comment|%>
<div class=card>
<p>Contents:<%= comment.content%></p>
<p>Evaluation:<%= comment.star%>point</p>
<div id="star-rate<%= comment.id%>"></div>
<script>
$('#star-rate<%= comment.id%>').raty({
size : 36,
starOff : '<%= asset_path('star-off.png') %>',
starOn : '<%= asset_path('star-on.png') %>',
half : false,
readOnly: true,
score: <%= comment.star %>,
});
</script>
</div>
<% end %>
If it doesn't work, In the Raty implementation, the error text is not displayed on the terminal, so use the developer tools of your browser to check the error text! !! Beginners! How to use Chrome's verification function (developer tool)
-I want to use Raty.js in the Webpacker development environment with Rails6. -Use Star Review Ratey with Rails -[Rails] Implement star rating for review (input, save, display)
Recommended Posts