My Jquery files are only loading on Refresh page rails 7

Question

My Jquery files are only loading when page is refreshed. But when I remove (import "@hotwired/turbo-rails") from application.js It works normally. But removing "@hotwired/turbo-rails" causing other issues. Anyone please help.

Answer 1

Like Mike said it's hard to know your exact issue without more detail, but it sounds like an issue I was just having with my link_to and redirects not triggering my javascript events (so my DataTables and certain componants of the random html5 template I'm using were not working).

I was reading through this link and it mentioned making turbo-drive "opt-in" globally across the app by adding this code to the bottom of your app/javascript/controllers/application.js

import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false

Search for "Disabling Turbo by default" in the link to get to the section I'm referring to.

I'm sure there is a better solution that involves keeping turbo-drive enabled and writing better JS or putting it in a better location, but at least now the JS in my app/javascript/application.js file as well as the JS files in the app/assests/javascripts directory are working the way I expect.

Thanks.

Answer 2

Change

$(document).on('ready', function () { ... }

to

document.addEventListener('turbo:load', () => { ... }