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