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-rc2 (January 31, 2013)

• Fix problem with 3rd-party libraries #12, #15 (kudos to @rstacruz);
• Reopen #8.

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.

License

The MIT License