I have a few JS functions linked to application.html.erb through channels.
They all work fine when the page is loaded. However, if I click any button on my page (href=""), JS seems to stop working and none of my functions apply anymore.
Here's the application.html.erb file:
<!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>
One of the functions:
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();
The application.js file:
// 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()
And the 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)
Any help would be highly appreciated :)
It's hard to tell just like that.
Have you noticed the point where it started to disfunction ? What have you implemented before it broke ? Also the bit inside "One of the functions" does not seem to appear anywhere in your application.js . How do you include this JS to your pages ?
Though I have a guess :
Because of Turbolinks, your JS permanently sits on your page and is not rerun each time new content is replaced in your DOM, then you have to force tell Turbolinks to rerun some bits of JS. You may then have to encapsulate your triggerDropdown() function into
document.addEventListener("turbolinks:load", function() {
.... your code ....
};
( https://github.com/turbolinks/turbolinks#observing-navigation-events ) so that the navbar which has been replaced on a link visit, is parsed again through JS