JS class file for one url

[c-gross]

Hi,

I wrote a js class a very specific and interactive page inside the admin platform. It's has a couple of eventlisteners, does different ajax requests and so far it is working fine when the code is included inside the custom blade template.

I would like ti move the code in a js file instead. Using webpack via laravel mix seems not to work for me. I tested many different ways (like include in the app.js with require/import or add it as a sep. js file to webpack). The class is not defined when I try to call it.

So I just put the js file inside the public/js folder for now. Thats working but the eventlisteners are still active when I go to a different page of the admin panel. If I click somewhere the old eventlisteners will throw errors that the elements are gone (TypeError: Cannot read properties of null (reading 'addEventListener')).

What is the correct way to handle that onepage behavior for classic js code?

[c-gross]

Found some ugly workarounds for now.

I have added a check for every eventlistener if the element exists which is working.
I also had to add some typof check to validate that the js file is loaded since turbo:load fires after a page load, not after everything is loaded.

Is the only correct way to implement some more complex js code learn turbo and stimulus?

[c-gross]

I'm still stuck to find a proper solution. JS classes stay active when I change the page. When I go back the the first page it will init the same class again while the old class is still somewhere in the browser memory and will cause that things getting done twice or multiple times.

Since the template with the js class event is gone after a page switch the class vars are also gone.
I tried to set the vars to null with turbo:before-visit but it does not help.
A global var sounds also very ugly and might not work. At least my first tests did not work.

Would be really nice if there was a documentation thats showing how to handle JS in this single page app.