Clicking “back” in the browser disables my javascript code if I'm using Turbolinks in Rails

Question

Well, as the title says more or less. I'm using the gem Turbolinks in my Rails application and I'm having a bit of a problem with the "browser back"-button. My javascripts works fine until i click back in my browser, then it stops working. If I click a link in my app or reload the page it starts working again.

Ant ideas how to fix this?

Answer 1

The jquery-turbolinks gem doesn't support Turbolinks 5 anymore, so that solution is deprecated right now.

If you'd like to disable turbolinks-caching, just add this meta to your page;

<meta name="turbolinks-cache-control" content="no-cache">

Answer 2

Two solutions for Turbolinks Classic:

Set the cache to 0 so that no pages are cached using HTML5 History.

Turbolinks.pagesCached(0);

Another solution is to listen to "page:restore" event and call your initialization method. This latter solution is more performant.

document.addEventListener("page:restore", function() {
  app.init();
});

Answer 3

You can find answer in next turbolinks issue discussion. For me, next solution worked - deleting element initialized by JS (in my case chosen dropdown) using next:

document.addEventListener("turbolinks:before-cache", function() {
    $('.chosen-select').chosen('destroy');
})

Answer 4

Instead of completely disabling turbolinks-caching in the whole app (making turbolinks integration quite useless) as detailed in some previous answers, you can just disable turbolinks only for the parts of page that are giving you troubles with JS

<div id="div_using_JS_functions" data-turbolinks='false'>
 .
 .
 .
</div>