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.

スクリーンショット 2020-10-25 0.06.01.png

(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.

Recommended Posts

Like function The part that is stuck in making it asynchronous
Where the follow function implementation is stuck
The story that .java is also built in Unity 2018
Asynchronous processing executed in Future in Swift Combine is sinking, but it is canceled in the middle
[Ruby] Thinking when there is no receiver in front of the method (it looks like)
I tried to implement the like function by asynchronous communication
Turn off the format function only in the specified part in Eclipse
What is @Override or @SuppressWarnings ("SleepWhileInLoop") in front of the function? ?? ??
Isn't it reflected even if the content is updated in Rails?
How to solve the problem that it is not processed normally when nesting beans in Spring Batch
If you think in your heart, "Replace the product image"! At that time, the action is over! ~ part4 ~
An active hash that can be treated as data even if it is not in the database
[Rails] Asynchronous implementation of like function
User evaluation using the like function
[Rails 6] Like function (synchronous → asynchronous) implementation
Implementation of like function in Java
Code of the part where server.servlet.session.timeout is set in spring.session.timeout in spring-boot2 system
Memo: [Java] If a file is in the monitored directory, process it.
[Rails] About the error that the image is not displayed in the production environment
Phenomenon that cannot log out even though it is described in devise
Is it possible to put the library (aar) in the Android library (aar) and use it?
[Java] Implement a function that uses a class implemented in the Builder pattern
Continuation ・ Active hash that can be handled as data even if it is not in the database ~ Display