Those who have implemented the like function and are able to perform synchronous processing, and those who do not behave in asynchronous processing Those who cannot "switch between liked and unliked states" without reloading How to install JQuery in Rails 6 (see ①) and how to debug (see ②)
Rails6 environment Turbolinks installed
Synchronous processing was realized in the like function, but I would like to note the part that was stuck in making it asynchronous.
Since there are good articles on the likes function (maybe there are many Rails 5 environments?), I would like you to base it on that, and in this article I hope there is a part that will be helpful when beginners are clogged up. I made an article.
Also, since I am a beginner, I would appreciate it if you could point out any mistakes.
Most of the articles currently published are in the Rails 5 environment, but please note that the setting method is different in the Rails 6 environment.
Up to Rails5 series, use "asset pipeline" to manage JavaScript.
gem 'jquery-rails'
application.js
//= require jquery
//= require rails-ujs
By introducing jquery-rails as described above, JQuery can be used for Rails application development. Then require JQuery on a manifest file such as app / assets / javasctipts / application.js. Even though I had Rails 6 installed, I wrote it in this Rails 5 method. Please refer to the article paying attention to the version of Rails, not limited to this part.
In Rails 6 or later, it is managed by a function called "Webpacker". In my case, the location of application.js was app / javascript / packs / application.js.
application.js
require("@rails/ujs").start()
require("turbolinks").start()
require('jquery')
Regarding the introduction, I referred to the following article. https://techtechmedia.com/jquery-webpacker-rails/ In addition, this article also touches on how to edit environment.js and check the introduction of JQuery. I will touch on how to confirm the introduction of JQuery below.
Put the following code in application.js and
application.js
require("@rails/ujs").start()
require("turbolinks").start()
require('jquery')
document.addEventListener("turbolinks:load", () => {
console.log($.fn.jquery)
})
Added console.log ($ .fn.jquery) to the js.erb file called by Javascript request with remote: true description.
create.js.erb
console.log($.fn.jquery)
$("#like_<%= @review.id%>").html("<%= j(render partial: "reviews/likes", locals: { review: @review, book: @book, likes: @likes })%>");
Then, the version of JQuery will be displayed in the console part of the developer tools. Keep in mind that this is a place to check when implementing asynchronous processing in JavaScript. If the version is displayed like "3.5.1" in the console part, it means that the installation has been completed.
create.js.erb
$("#like_<%= @review.id%>").html("<%= j(render partial: "reviews/likes", locals: { review: @review, book: @book, likes: @likes })%>");
I misunderstood that there was no error, but I did not check the log output by rails s. When I clicked the like button, the rails s log was output, and at the very end I got an error if the id was undefined. The rails s log is as follows.
Started POST "/books/2/reviews/3/likes" for ::1 at 2020-10-24 09:41:59 +0900
Processing by LikesController#create as JS
・
.
(abridgement)
・
.
ActionView::Template::Error (undefined method `id' for nil:NilClass):
1: $("#like_<%= @review.id %>").html("<%= j(render partial: "reviews/likes", locals: { review: @review, book: @book, likes: @likes })%>");
There is an error at the bottom. In my case, create.js.erb including @review didn't work and didn't behave asynchronously because there was an error in the definition of @review in the controller and it didn't contain a value. After proper debugging (correct definition of variables) for this error, the problem that "switching between liked state and unliked state" could not be done without reloading was solved, and the behavior of asynchronous processing was changed. I was able to realize it.
I hope it will be helpful for those who are clogged with similar environments and parts.