Contributors: 1 Friday, March 3, 2017
Licensed under: CC-BY-SA
Not affiliated with Stack Overflow
Rip Tutorial:
Roadmap: roadmap

Binding to turbolink's concept of a page load


With turbolinks, the traditional approach to using:

$(document).ready(function() {
  // awesome code

won't work. While using turbolinks, the $(document).ready() event will only fire once: on the initial page load. From that point on, whenever a user clicks a link on your website, turbolinks will intercept the link click event and make an ajax request to replace the <body> tag and to merge the <head> tags. The whole process triggers the notion of a "visit" in turbolinks land. Therefore, instead of using the traditional document.ready() syntax above, you'll have to bind to turbolink's visit event like so:

// pure js
document.addEventListener("turbolinks:load", function() {
  // awesome code

// jQuery
$(document).on('turbolinks:load', function() {
  // your code