I want to solve the problem that JS is not displayed properly unless reloaded when transitioning with Turbolinks: link_to

table of contents

  1. Introduction
  2. [What interferes with the display of JS ...](What interferes with the display of #js)
  3. [Who are Turbolinks? ](Who is #turbolinks)
  4. Solution
  5. Finally

Introduction

Currently creating a portfolio In that, I implemented a calendar function using JavaScript,

** When transitioning from link_to to the calendar page, There was a problem that JavaScript was not applied unless it was reloaded once **, so

I am writing this article with the intention of clarifying the cause of this area and keeping a record. Please note that this article is by a beginner in programming.

What interferes with the JS display is ...

All in all, ** Turbolinks **. Because of this guy, the JS I wrote hard is not displayed at the transition destination.

Thinking this way, it seems like a hateful guy, When I researched various things, it seems that he is actually a good guy.

It's a good guy, but sometimes with extra help, It seems that we inadvertently hide our important and important JS.

Turbolinks, maybe you can't hate it. That made me want to know more (forcibly).

That's why I'll take a closer look.

Who are Turbolinks?

Turbolinks is a library that automatically Ajax page transitions in response to link clicks.

① Click the a tag to get the transition destination page with Ajax

(2) If the CSS or JS required by the acquired page is the same as that of the current page, replace only the title and body (only a part of the screen).

That is the main mechanism of Turbolinks.

Benefits of introducing Turbolinks

The biggest advantage of introducing Turbolinks is that it ** speeds up the screen display **.

Normally, clicking a link will take you to the specified page, so it will take that much time, but if you have Turbolinks installed, ** the page will not be transitioned and Ajax will part of the screen Since it is a mechanism to update only **, as a result, it does not take time to load and the page display speeds up.

From the point of view of the site, I want to eliminate the waiting time as much as possible. Turbolinks feels like a savior that improves UX.

What a good guy: laughing: The fact that it was introduced from the beginning is because it is convenient and usable as it is.

That said, no matter how good a guy is, it can be annoying at times and in some cases.

Disadvantages of introducing Turbolinks

The disadvantage of introducing Turbolinks is that it may interfere with the proper display of JS and CSS **.

In terms of benefits, I explained that Turbolinks only updates part of the screen, It can be said that this mechanism causes the problem that JavaScript does not reflect well. In the above, I mentioned that if you use Turbolinks, ** page transition will not be performed and only a part of the screen will be updated by Ajax **.

** Since the page transition of the browser is not performed, the JavaScript event does not fire **, and as a result, the JavaScript does not reflect well.

This is the rumored Turbolinks extra section. I see.

solution

Introducing Turbolinks, disabling it where necessary, I want to reflect the behavior of JavaScript somehow.

Apparently there are two solutions for those people.

① Added events provided by Turbolinks

Make JS work properly by adding the event turbolinks: load dedicated to Turbolinks to the JS file.

test.js


document.addEventListner('turbolinks:load', function() {
  console.log('Loaded');
});

② Disable Turbolinks on a specific link

By adding data: {"turbolinks" => false} to the a tag (link_to) JS works normally by disabling Turbolinks and making it jump to the transition destination.

test.html.slim


=link_to "test", tests_path, data: {"turbolinks" => false}

Finally

I happened to look into Turbolinks when I created my portfolio. The more I looked up, the deeper I felt. This time, I'll keep the basics, but if I have another chance, I'd like to investigate.

If you find any mistakes or omissions in the content of this article, we would appreciate it if you could let us know.

Reference: Rails Guide Turbolinks Operating Principle [Ruby on Rails Quick Learning Guide p.340-p.344](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD % BF% E3% 81% 88% E3% 82% 8B-Ruby-Rails-5% E9% 80% 9F% E7% BF% 92% E5% AE% 9F% E8% B7% B5% E3% 82% AC % E3% 82% A4% E3% 83% 89-% E5% A4% A7% E5% A0% B4% E5% AF% A7% E5% AD% 90 / dp / 4839962227 / ref = sr_1_1? __mk_ja_JP =% E3 % 82% AB% E3% 82% BF% E3% 82% AB% E3% 83% 8A & crid = 2RTWZ5N8BXF8J & dchild = 1 & keywords = rails +% E5% AE% 9F% E8% B7% B5% E3% 82% AC% E3% 82 % A4% E3% 83% 89 & qid = 1600782175 & sprefix = rails +% E5% AE% 9F% E8% B7% B5% 2Caps% 2C249 & sr = 8-1)

Recommended Posts

I want to solve the problem that JS is not displayed properly unless reloaded when transitioning with Turbolinks: link_to
[Rails] I want to add data to Params when transitioning with link_to
How to solve the problem that the website image is not displayed after deploying to heroku on Rails 5
How to solve the problem that it is not processed normally when nesting beans in Spring Batch
I faced a problem that JS is not read after page transition and JS is read when loaded.
How to solve the problem when the value is not sent when the form is disabled in rails and sent
How to solve the problem that you can not pull image from docker hub with Minikube
I tried to solve the problem of "multi-stage selection" with Ruby
I want to solve the N + 1 problem where the data is collated excessively and the operation becomes heavy.
About the problem that the image is not displayed after AWS deployment
About the solution to the problem that the log of logback is not output when the web application is stopped
[WSL] Solution for the phenomenon that 404 is displayed when trying to insert Java with apt (personal memo)
[Rails] How to solve the problem that the default image is overwritten when editing without uploading the image [Active Storage]
I tried to solve the tribonacci sequence problem in Ruby, with recursion.
[For beginners] When you want to say that the JVM (-D) option does not work with the java -jar command, or that the library is buggy.
[Rails] [Parent-child relationship] I want to register the foreign key in the child with nil when the parent is deleted.
[Rails] When transitioning to a page with link_to, move to the specified location on the page
The devise error message is not displayed properly.
GoogleMap is not displayed until the browser is reloaded
When the project is not displayed in eclipse
I want to get the information of the class that inherits the UserDetails class of the user who is logged in with Spring Boot.
Even in Java, I want to output true with a == 1 && a == 2 && a == 3 (gray magic that is not so much as black magic)
[Beginner's point of view] I tried to solve the FizzBuzz problem "easily" with Ruby!
The story that did not disappear when I tried to delete mysql on ubuntu
[Android Studio] About the matter that the design view is not displayed when using TextClock
How to fix the problem that the upper half is cut off when using UITabBar
A warning is displayed when trying to use a huge integer with the special variables $ 1, $ 2, $ 3 ...
I want to dark mode with the SWT app
I tried to solve the Ruby bonus drink problem (there is an example of the answer)
Use cryptographically secure pseudo-random numbers to verify that the solution to the Monty Hall problem is not 50%
[Rails] What to do when the view collapses when a message is displayed with the errors method
I want to set the conditions to be displayed in collection_check_boxes
I want to expand the clickable part of the link_to method
I want to distinct the duplicated data with has_many through
I want to pass the startup command to postgres with docker-compose.
When I try to use the AWS SDK with Ruby + Lambda, `sam local` is messed up.
I tried to solve the Ruby bingo card creation problem (there is an example of the answer)
I want to make the frame of the text box red when there is an input error
What to do if the app is not created with the latest Rails version installed when rails new
What to do when javax.el.ELException: Not a Valid Method Expression: appears when the JSF screen is displayed