Tengo algunas funciones JS vinculadas a application.html.erb a través de canales.
Todos funcionan bien cuando se carga la página. Sin embargo, si hago clic en cualquier botón de mi página (href=""), JS parece dejar de funcionar y ya no se aplica ninguna de mis funciones.
Aquí está el archivo application.html.erb:
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </head> <body> <%= render 'shared/navbar' %> <%= yield %> <%= render 'shared/footer' %> <%= render 'shared/modal' %> </body> </html>Una de las funciones:
var dropdownMenu = document.querySelector(".dropdown-menu"); function triggerDropdown() { dropdownMenu.addEventListener("click", (event) => { var dropdownReveal = document.querySelector(".dropdown-container"); var closingBtn = document.querySelector(".closing-btn"); var openingBtn = document.querySelector(".dropdown-menu img"); if (dropdownReveal.style.display == 'block') { dropdownReveal.style.display = 'none'; closingBtn.style.display ='none'; openingBtn.style.display = 'block'; } else { dropdownReveal.style.display = 'block' closingBtn.style.display ='block'; openingBtn.style.display = 'none'; }; }); } triggerDropdown();El archivo application.js:
// This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. import Rails from "@rails/ujs" import Turbolinks from "turbolinks" import * as ActiveStorage from "@rails/activestorage" import "channels" Rails.start() Turbolinks.start() ActiveStorage.start()Y el index.js:
// Load all the channels within this directory and all subdirectories. // Channel files must be named *_channel.js. const channels = require.context('.', true, /_channel\.js$/) channels.keys().forEach(channels)Cualquier ayuda sería muy apreciada :)
Es difícil saberlo así.
¿Has notado el punto donde comenzó a funcionar mal? ¿Qué has implementado antes de que se rompiera? Además, el bit dentro de "Una de las funciones" no parece aparecer en ninguna parte de su application.js. ¿Cómo incluyes este JS en tus páginas?
Aunque tengo una conjetura:
Debido a Turbolinks, su JS se encuentra permanentemente en su página y no se vuelve a ejecutar cada vez que se reemplaza contenido nuevo en su DOM, luego debe forzar a Turbolinks para que vuelva a ejecutar algunos bits de JS. Luego, es posible que deba encapsular su función triggerDropdown() en
document.addEventListener("turbolinks:load", function() { .... your code .... };( https://github.com/turbolinks/turbolinks#observing-navigation-events ) para que la barra de navegación que se reemplazó en una visita de enlace se analice nuevamente a través de JS