Do you like Turbolinks? It's easy and fast way to improve user experience of surfing on your website.
But if you have a large codebase with lots of $(el).bind(...)
Turbolinks will surprise you. Most part of your JavaScripts will stop working in usual way. It's because the nodes on which you bind events no longer exist.
I wrote jquery.turbolinks to solve this problem in my project. It's easy to use: just require it immediately after jquery.js
. Your other scripts should be loaded after jquery.turbolinks.js
, and turbolinks.js
should be after your other scripts.
Initially sponsored by Evil Martians.
This project is a member of the OSS Manifesto.
This readme points to the latest version (v2.x) of jQuery Turbolinks, which features new 2.0 API. For older versions, see v1.0.0rc2 README.
Gemfile:
gem 'jquery-turbolinks'
Add it to your JavaScript manifest file, in this order:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
And it just works!
By default, jQuery.Turbolinks is bound to page:load and page:fetch. To use different events (say, if you're not using Turbolinks), use:
$.turbo.use('pjax:start', 'pjax:end');
You can check if the page is ready by checking $.turbo.isReady
, which will be
either true
or false
depending on whether the page is loading.
The $(function(){ $(document).foundation(); });
has to come before the
turbolinks gem.
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
$(function(){ $(document).foundation(); });
//
//= require turbolinks
If you find that some events are being fired multiple times after using jQuery Turbolinks, you may have been binding your document
events inside a $(function())
block. For instance, this example below can be a common occurrence and should be avoided:
/* BAD: don't bind 'document' events while inside $()! */
$(function() {
$(document).on('click', 'button', function() { ... })
});
You should be binding your events outside a $(function())
block. This will ensure that your events will only ever be bound once.
/* Good: events are bound outside a $() wrapper. */
$(document).on('click', 'button', function() { ... })
This project uses Semantic Versioning for release numbering.
For changelog notes, checkout releases page.
Initial idea and code by @kossnocorp, with special thanks to @rstacruz and other the project's contributors.