jQuery Turbolinks
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.
Usage
Gemfile:
gem 'jquery-turbolinks'
JavaScript manifest file:
//= require jquery.turbolinks
And it just works!
Customization
$.setReadyEvent
By default ready function is bound to page:load event.
If you want to change it use $.setReadyEvent
function:
$.setReadyEvent('page:change');
$.setFetchEvent
By default right after trigger page:fetch
$.isReady
is set to false. And after page:load
is set to true.
If you want to change default behaviour you can use $.setFetchEvent
:
$.setReadyEvent('custom_loading_event');
Troubleshooting
Events firing twice or more
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() { ... })
Changelog
This project uses Semantic Versioning for release numbering.
1.0.0 (April 5, 2013)
- Add uglified version.
1.0.0-rc2 (January 31, 2013)
1.0.0-rc1 (November 28, 2012)
- Set $.isReady to false after
page:fetch
#6; - add
$.setFetchEvent
function; - remove all delegated events after trigger fetch event #8.
1.0.0-rc (November 8, 2012)
- Add turbolinks as dependency (kudos to @gbchaosmaster);
- run callback after adding to waiting list if
$.isReady
#6.
0.2.1 (October 15, 2012)
- Pass jQuery object to each callback #4
0.2.0 (October 10, 2012)
- Change event:
page:change
->page:load
(kudos to @davydotcom); - added ability to change ready event via
$.setReadyEvent
0.1.0 (October 3, 2012)
- First, initial release
Contributors
Initial idea and code by @kossnocorp, with special thanks to @rstacruz and other the project's contributors.