Like function The part that is stuck in making it asynchronous

Target person

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 ②)

environment

Rails6 environment Turbolinks installed

Purpose of the article

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.

(1) I did not understand the difference between the JQuery introduction method between Rails 5 and Rails 6 (environment setting error)

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.

For Rails 5

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.

For Rails 6

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.

How to check JQuery introduction

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.

(2) I did not notice the error in the variable definition (I did not check the error log by rails s)

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.