Turbolink (JS) reload issue within Rails app

674 Views Asked by At

I'm working on a Rails 5.2 app with Turbolink installed by default. I understand that Turbolink does not reload all assets when navigating through a site so some JS components of the site stop working until I manually reload the page. In my example the navigation dropdown and save button on the edit post page doesn't work. I've tried removing Turbolink from the project altogether and this seems to fix the issue but know that I need Turbolink for performance reasons in production. To my understanding, this is the reason turbolink comes as default with Rails after version 4. The solution I' found online is to add this code below to my JS code: document.addEventListener("turbolinks:load", function() { my_func(); })

The problem I have with this solution is that I don't know exactly how to wrap my code with that line. I'm working with a Bootstrap theme that has 4 JS files. The smallest of these files has 200 lines and has various functions. How to do you fix this Turbolink issue when using Bootstrap themes? Do you wrap the solution around the entire javascript file?

1

There are 1 best solutions below

1
On

Do you need Turbolinks for performance?

Generally, good web caching (304 for assets), defer and async for scripts, etc. will cause a browser to behave almost like with Turbolinks enabled.

But in general, if your theme and/or bootstrap (I haven't used it) doesn't have a single init function, but every single element is initializing itself, then you're probably in for a rough ride.

I would look through the prettified version of the theme (or documentation) to see if there is a general init function you can call.

Hope this helps.