[JAVA] J'ai rencontré un problème selon lequel JS n'est pas lu après la transition de page et JS est lu lorsqu'il est chargé.

Statut

C'est une erreur que j'ai rencontrée lors du développement d'une application Flima à l'aide de Rails. Lors de la mise en œuvre de la fonction de liste de produits, nous avons implémenté une fonction qui calcule et affiche automatiquement les frais pour le produit à répertorier en déclenchant un événement en entrant le prix.

Après avoir confirmé qu'il était automatiquement affiché, j'ai sauté de la page supérieure au lien sur la page de liste des produits et vérifié si la fonction de liste des produits fonctionnait et j'ai trouvé un problème selon lequel les frais ne s'affichaient pas même si j'entrais le prix.

Lorsque je vérifiais la description du code, etc., j'ai été paniqué par le phénomène selon lequel la fonction d'affichage automatique des frais a été restaurée avant que je ne le sache.

Un indice de la solution

Je fais diverses choses et il est impossible que la fonction soit restaurée avant que je le sache, donc quand j'ai essayé de voir comment le comportement change à chaque fois que je réécris le code un par un ou que j'appuie sur un bouton, il semble que JavaScript soit sur la page immédiatement après la transition de la page __. Il n'a pas été chargé, et lorsque j'ai à nouveau actualisé la page après avoir accédé à la destination du lien, on a découvert que JavaScript était chargé __.

window.addEventListener('load',function(){
Code d'affichage des frais dans ce
});

Étant donné que le chargement de la page est nécessaire pour déclencher tous les événements JavaScript, je me suis demandé si le chargement ne serait pas chargé lorsque la page était ignorée. Cependant, lorsque j'ai enquêté, il a été dit que la charge est un événement qui est chargé même si la page est modifiée, et je suis devenu de plus en plus confus que JS ne fonctionnait pas.

Solution

Après tout, il n'y avait rien de mal avec le code JavaScript lui-même. J'ai donc décidé de vérifier comment JavaScript est chargé en premier lieu. Le flux de chargement de JavaScript avec des rails est le suivant.

Il est chargé dans la balise head de la vue commune de 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 avec cette description.Chargement de js.
</head>

Le JavaScript utilisé dans les rails est chargé ensemble dans app / javascript / packs / application.js.

Omission
require("@rails/ujs").start()
require("turbolinks").start()← Cause du dysfonctionnement (expliquée ci-dessous)
require("@rails/activestorage").start()
require("channels")
require("../fee.js")
require("../card.js")
Omission

Quand j'ai examiné ce qui était lu un par un, la cause a finalement été trouvée. __ La cause du bogue était le chargement de turbolinks dans application.js. __turbolinks charge beaucoup de JavaScript dans le développement à grande échelle, il semble donc que ce soit pour le charger efficacement.

Cependant, il semble y avoir une mauvaise partie et cela peut provoquer un phénomène selon lequel l'événement de déclenchement de la charge n'est pas lu immédiatement après la transition de page.

Dans les rails, lorsque vous créez une application, la description de lecture des turbolinks est automatiquement écrite dans application.js. turbolinks permet de rendre JavaScript facile à lire sur les grands sites et n'est pas nécessaire lors de la création d'un portfolio individuellement, donc si vous commentez ceci et le rendez illisible, JavaScript ne démarrera pas après la transition de page J'ai pu résoudre le problème.

Dans le développement à grande échelle, il semble que les turbolinks, etc., qui sont lus par défaut, peuvent être réécrits en autre chose.

Je suis encore un débutant et j'ai peut-être écrit de mauvaises connaissances, je vous serais donc reconnaissant de bien vouloir me dire s'il y a des erreurs.

Je pense que c'était une mauvaise phrase, mais merci.

Recommended Posts

J'ai rencontré un problème selon lequel JS n'est pas lu après la transition de page et JS est lu lorsqu'il est chargé.
Après avoir vérifié le problème de Montyhall avec Ruby, c'était une histoire que je pouvais bien comprendre et que je ne comprenais pas bien
Turbolinks: je veux résoudre le problème que JS ne s'affiche pas correctement à moins d'être rechargé lors de la transition avec link_to
À propos du problème selon lequel l'image n'est pas affichée après le déploiement AWS
Lorsque je soutiens l'internationalisation avec Spring Boot, je suis accro à ne pas traduire une langue spécifique
4 livres techniques que je regrette d'avoir dû lire quand j'étais un nouveau venu
Lorsque j'appelle le fichier avec la classe # getResource à partir du fichier jar, il devient Not Found et c'est un mémorandum merdique
Je souhaite établir une connexion lorsqu'une base de données est créée à l'aide de Spring et MyBatis