I faced a problem that JS is not read after page transition and JS is read when loaded.

Status

This is an error I experienced while developing a flea market app using Rails. While implementing the product listing function, we have implemented a function that automatically calculates and displays the commission of the product to be listed by firing an event by entering the price.

After confirming that it is automatically displayed, I jumped from the top page to the link on the product listing page and checked whether the product listing function was working, and found a problem that the commission was not displayed even if I entered the price.

When I was checking the code description etc., I was panicked by the phenomenon that the automatic fee display function was restored before I knew it.

A clue to the solution

I've been doing various things, and it's impossible for the function to be restored before I knew it, so when I tried to see how the behavior changes each time I rewrite the code one by one or press one button, it seems that JavaScript is on the page immediately after the __ page transition. It was not loaded, and when I refreshed the page again after jumping to the link destination, it was discovered that JavaScript was loaded __.

window.addEventListener('load',function(){
Code for displaying fees in this
});

Since page loading is required to fire all JavaScript events, I wondered if the specification is that load is not loaded when the page is skipped. However, when I investigated, it was said that load is an event that is loaded even if the page is changed, and I became more and more confused that JS did not work.

Solution

After all, there was nothing wrong with the JavaScript code itself. So, I decided to check how JavaScript is loaded in the first place. The flow of loading JavaScript with rails is as follows.

It is loaded in the head tag of the common view of application.html.erb.

<head>
  <title>Furima</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <script type="text/javascript" src="https://js.pay.jp/v1/"></script>
  <%= stylesheet_link_tag 'application', media: 'all'%>
  <%= javascript_pack_tag 'application' %>← application with this description.Loading js.
</head>

The JavaScript used in rails is loaded together in app / javascript / packs / application.js.

Omission
require("@rails/ujs").start()
require("turbolinks").start()← Cause of malfunction (explained below)
require("@rails/activestorage").start()
require("channels")
require("../fee.js")
require("../card.js")
Omission

When I examined what was being read one by one, the cause was finally found. __ The cause of the bug was loading turbolinks in application.js. __turbolinks loads a lot of JavaScript in large-scale development, so it seems to be for efficiently loading it.

However, there is a bad part, and it seems that there is a phenomenon that the event firing of load is not read immediately after the page transition __.

In rails, when you create an application, the description to read turbolinks is automatically written in application.js. turbolinks is for making JavaScript read immediately on a large site and is unnecessary when creating a portfolio individually, so if you comment out this and make it unreadable, JavaScript will not start after page transition I was able to resolve the problem.

In large-scale development, it seems that turbolinks etc. loaded by default may be rewritten to another one and used.

I am still a beginner and may have written the wrong knowledge, so I would be grateful if you could tell me if there are any mistakes.

I think it was a poor sentence, but thank you.

Recommended Posts

I faced a problem that JS is not read after page transition and JS is read when loaded.
Fixed the phenomenon that vuetify built in Rails is not loaded when page transition is done
After verifying the Monty Hall problem with Ruby, a story that I could understand well and did not understand well
I want to solve the problem that JS is not displayed properly unless reloaded when transitioning with Turbolinks: link_to
About the problem that the image is not displayed after AWS deployment
When internationalizing is supported by Spring Boot, a specific locale is not translated and I am addicted to it
Four technical books that I regret that I should have read when I was a newcomer
When I call the file with Class # getResource from the jar file, it becomes Not Found and it is a crappy memorandum
I want to issue a connection when a database is created using Spring and MyBatis
Solved the problem that profile and logout were not displayed on the screen after signup.