Rails, by default, includes a library called Turbolinks1 that actually has been doing some Ajax for us all along without us even knowing it. When users click on links, Turbolinks has been only replacing the <body>
of the document, to make the application feel a bit snappier.
This, however, can mess with our jQuery, which is listening for $(document).ready
(which only fires when a full page reload occurs) to initialize event handlers when users navigate to different pages. To solve this, we can use the turbolinks:load
event instead:
$(document).on('turbolinks:load', function() {
console.log("It works on each visit!")
})
If you pull in a 3rd-party JavaScript library (say, for example, Google Maps), and you notice some weird behavior, especially things that are resolved when you do a full page refresh: the issue is probably related to Turbolinks.
Try the turbolinks:load
fix above. Or sometimes you have to do some other things, as we did to fix the Bootstrap modal in Photogram Industrial.
A common strategy is to just remove Turbolinks; or when you’re first creating your app with rails new
, use the --skip-turbolinks
option to never include it in the first place. Since we’re about to add real Ajax to our application anyway, having the automatic sort-of-but-not-really-Ajax of Turbolinks becomes less helpful.
Read more about Turbolinks here, if you’re interested. ↩