I have a rails project using zurb foundation 2.x. I just tried your gem hoping that all will be working as foundation uses $.ready() function. But instead it breaks on the customforms plugin:

TypeError: $ is undefined
$.foundation.customForms.appendCustomMarkup = function () 

So is it a problem with jquery.turbolinks or zurb foundation?

created new rails project using ruby version 2.2.2

in Gemfile
...
gem 'rails', '4.2.4'
...
gem 'jquery-turbolinks'

$ bundle install
....
Using turbolinks 2.5.3
Using jquery-turbolinks 2.1.0

in application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .

when running app / loading page
couldn't find file 'turbolinks' with type 'application/javascript'
//= require turbolinks << pointing to this line

I used this:

$(document).on('ready', function() {
  ...
});

and my callback wasn't being called by jquery.turbolinks when I clicked a link and it went through Turbolinks.

I had to change it to $(function() {}) or $(document).ready(function() {}); for it to work. I know those syntaxes are more common. But since there are so many references to $(document).on in places that talk about Turbolinks (including $(document).on('ready page:change') when not using jquery.turbolinks), other people might use it too, as I did.

jQuery 1.11.0
Turbolinks 2.2.2

Hi, I have a problem

I want to store #main-container(overflow:scroll)'s scrollTop,
that when I click browser's back button, I can use it to set scrollTop.

But, I find I can't write anything in history.state, it will rewrite by turbolinks

> history.state.scrollTop = 200`
< Object {turbolinks: true, url: "http://localhost:3000/",scrollTop:200} 

change page and back

> history.state
< Object {turbolinks: true, url: "http://localhost:3000/"} 

I had to use localStorage

      $(document).on('page:before-change', function(){
        localStorage[location.pathname] = $('.main-container').scrollTop();
      })
      $(document).on('page:change', function(e){
        $('.main-container').scrollTop(localStorage[location.pathname])
      })

how cant I use history.state to do this ?

No need to test on antique v0.4 and v0.6... in fact, it causes more problems than its worth:

ReferenceError: Uint8ClampedArray is not defined
    at Object.createWindow (/home/travis/build/kossnocorp/jquery.turbolinks/node_modules/jsdom/lib/jsdom/browser/index.js:300:24)
    at Object.windowAugmentation

There's two pages that link to each other. Let's call them Page A and Page B.

Page A looks like;

<a href="pageb">page b</a>

And page B looks like:

<a href="pagea">page a</a>
<script type="text/javascript">
 $(document).ready(function() {
    console.log(window.location.href)
  });
</script>

Start on page A, and navigate to page B; the page's URL will be logged once. Navigate back to page A, and the URL will be logged again. Navigate back to page B, and it will be logged twice. Basically, an additional .ready() handler will be added each time, so after a while you might find the events from page B being run 10 times each time you go from one page to the other.

It's late at night so I haven't been able to think of an elegant solution. But I imagine that checking for duplicates at line 35 (https://github.com/kossnocorp/jquery.turbolinks/blob/master/src/jquery.turbolinks.coffee#L35) would work. Every .ready() callback should only be called once per page:load, I think.

I doubt it makes a difference, but I'm using Chrome 23 on OS X.

Secondary issue;

In my project, the initial issue came up because I have some object initialisation that only happens on one particular page;

<script type="text/javascript">
 $(document).ready(function() {
    window.handler = new Handler().init();
  });
</script>

So I'll have to modify the init() function to only act if it's on the right page. Unless this project could somehow solve that problem too?

As the title says,
http://cferdinandi.github.io/smooth-scroll/ works perfectly if i remove turbolinks but when i include it it simply does not work. Is this a known issue ? I don't seem to be getting any errors, it's weird.

Delete link (data-method=delete data-confirm="Yes?") + rails ujs + turbolink'd page (after page change) = fail
Likely related to how rails_ujs binds events

I have this JS on my app

$(document).on('page:before-change', function(){
  if($('.chat-text-field').val())
    return confirm("Your message hasn't been sent yet. Do you still want to leave?");
});

turns out that this message is beign fired 3 times. Is there something else missing?
Also, my data-confirm message are being fired multiple times.
I'm using Ruby 2.2.2 with Rails 4.2.3 and Turbolinks 2.5.3

Getting a //= require turbolinks in the resulting application.js which implies Sprockets stopped processing requires.

An easy fix is to drop the snippet into app/assets/javascripts/foundation.turbolinks.js and //= require foundation.turbolinks in application.js

Hi!
I think the js in the vendor folder are for version 2.0.0. You might want to update them.

Thanks!

/* Good: events are bound outside a $() wrapper. */
$(document).on('click', 'button', function() { ... })

While I like this style, (becuase it gaurantees events won't be bound twice,
How can I reference functions that have been defined inside my jQuery.ready()
block from outside the block?

Or are you saying, do away with jQuery.ready() all together and just define all functions and events outside the jQuery.ready block?

jquery.turbolinks says: https://github.com/kossnocorp/jquery.turbolinks

just require it after jquery.js and turbolinks.js, but before other scripts.

turbolinks says: https://github.com/rails/turbolinks

add the following line to your JavaScript manifest file, after jquery.js but before turbolinks.js:
//= require jquery.turbolinks

one of these needs to be changed

Hey, this is completely optional but it might make things easier for you @kossnocorp!

gem owner jquery-turbolinks -a [email protected]
npm owner add rstacruz jquery.turbolinks

Hi, I'm going to host this project on cdnjs.
Would you add a dist folder for release files If it's possible?
cdnjs/cdnjs#7604

I don't know if you've come across this problem before. But, most of the components that power Foundation 5 button elements aren't transitioning including the tabs. Maybe, you can help me get the JavaScript to initialize so, that I can move on with production of my app. Thank you!

Hi,

I have a conceptual question.

With code like:

$(document).on(event, selector, handler)

handler delegates to selector multiply times. I wonder if it s a good idea to remove all delegates on page:load?

Currently I need to do $(document).off(event, selector) each time.

I am using jquery.turbolinks with rails 4 + coffee script.

1. How do I verify if turbolinks is loading the page on click ? How do I verify this
2. Does loading via jquery.turbolinks request assets even if the sequence is same ? I noticed that the railscasts screencast on turbolinks displays that it does not load assets
3. Can I verify this in development mode or do I need to compile the assets in order to see this in action ?

The below "alert" is not called when the Turbolinks Ajax call has finished:

$(document).ajaxStop(function() {
  alert('All Ajax calls are done!');
})

In the Gemfile:

gem 'jquery-rails' # (3.1.0)
gem 'turbolinks' # (2.2.1)
gem 'jquery-turbolinks' # (2.0.1)

Here's an opinionated article on how to properly use Turbolinks:

https://coderwall.com/p/ypzfdw

it may be cool to link this on the Readme. However, considering who the author is (heh), I'd like to hear some outside validation on whether it should be linked from the Readme or not.

(cc @kossnocorp)

this is a great plugin, it fixed most of my issues but 1.

When you use browser back button no events are fired.

jQuery 1.8.2 source code:

// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}    

So, it's using rootjQuery for that internally (which doesn't have a modified .ready), and the callback never gets registered with our callbacks

bad ideas for a fix:

• Override jQuery(function)
• Override the promise object

I read troubleshooting section but I got this problem:

;(function(App){

    App.Supertestes = {};

    App.Supertestes.bindFunctions = function() {

        console.log('bind called');
        $(document).on("click", '.bt_login', function(e){

            console.log('.bt_login clicked');
            return false;
        });

    };


    App.Supertestes.init = function() {
        this.bindFunctions();
    }

})(App);

$(document).ready(function(){
  App.Supertestes.init();
});

I'm using the gem but the event is trigged twice or more. What is wrong? Do use the listeners inside App object is wrong?

I get the 'Uncaught TypeError: callback is not a function', linking to this part of the code:

  return $document.on('turbo:ready', function() {
    return callback($);
  });

Am I doing something wrong?

Hi!
I found this gem and thought it would be nice to use in my project.
But unfortunately it does not work for me.

Here is my application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs

//= require ...
//= require ...

//= require turbolinks

I have

rails (4.2.6)
jquery-rails (4.1.1)
jquery-turbolinks (2.1.0)
turbolinks (5.0.0)

Am I doing something wrong?
Thank you.

When I attach a handler to the window scroll event on one specific page, this handler is executed on every following page I visit.

For example (see code below). When I visit page 'foo' and start scrolling I see that I'm 'scrolling in foo'. If I then click on the link to visit the 'bar' page and start scrolling, I see the same message.

Is this my bad or is this an issue with Turbolinks?

foo.html.erb:

<%= link_to "Go to bar", bar_path %>
<div id="output">...</div>
<script>
  $(window).on('scroll', function() {
    $("#output").text("scrolling in foo");
  });
</script>

bar.html.erb:

<%= link_to "Go to foo", foo_path %>
<div id="output">...</div>

when i click the back button in browser, turbolinks loads twice. how to solve this problem

After installing this gem I received the flowing error:

undefined method `environment' for nil:NilClass

Which links to framework_and_overrides.css.scss! I tried removing the gem without any changes to other files and everything works fine again. I was unable to debug this problem but the error is raised during stylesheets import on this line:

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "true"   %>

There's currently inconsistency in the "isReady" / not states.
Consider this part of (the compiled javascript):

      if ($.turbo.isReady) {
        return callback($);
      } else {
        return $document.on('turbo:ready', function() {
          return callback($);
        });
      }

When it's ready, then the callback is executed only once (right away), and if it's not, then the callback is added on 'turbo:ready' for ever. I propose to change the "on()" to "one()" for consistency.

P.S. I found that while doing performance analysis of our application, and found multiple invocations of the "onready" callback.

Hello there, I found that by default webpack doesn't find jquery.turbolinks module but if you add this:

"main": "vendor/assets/javascripts/jquery.turbolinks.js",

after

"license": "MIT",

at package.json file, it will work perfectly!

This worked fine in Rails 3.2. I'm updating to Rails 4 and experiencing an error in my document ready handlers. If I remove jquery.turbolinks from my application.js, the error goes away.

behavior.js is a file with a declaration like this:

jQuery(function($) {
  $('form').submit(function(){
  ...
  });
});

On page load, I get the following error:

Uncaught TypeError: object is not a function behavior.js?body=1:2
(anonymous function) behavior.js?body=1:2
jQuery.event.dispatch jquery.js?body=1:5096
elemData.handle jquery.js?body=1:4767
jQuery.event.trigger jquery.js?body=1:5008
(anonymous function) jquery.js?body=1:5692
jQuery.extend.each jquery.js?body=1:658
jQuery.fn.jQuery.each jquery.js?body=1:267
jQuery.fn.extend.trigger jquery.js?body=1:5691
$.turbo.onLoad jquery.turbolinks.js?body=1:33
fire jquery.js?body=1:3049
self.fireWith jquery.js?body=1:3161
jQuery.extend.ready jquery.js?body=1:434
completed jquery.js?body=1:105

Seems to be some interaction with Zurb Foundation that I do not understand. Removing jQuery-turbolinks fixed the issue though.

Description here: http://stackoverflow.com/questions/27114679/pagination-or-zurb-foundation-causing-morris-js-chart-rendering-issues

Would really like to understand this better.

1. This is my application.js:
   //= require jquery
   //= require jquery.turbolinks
   //= require jquery_ujs
   ...
   //= require turbolinks

2. I've added the following to the Gemfile:
   gem 'jquery-turbolinks'

3. I ran bundle install.

RESULT
In my application.js the jquery.turbolinks line is marked with a warning (CANNOT RESOLVE FILE JQUERY.TURBOLINKS)... it's strange because it's the only one with this issue. Note that i'm using RubyMine IDE (i don't know if it could help).

I have added jquery.turbolinks gem in my rails application and have bind my button like this

this click is being fired multiple times don't know why

It looks like the latest version of Turbolinks doesn't use the same event names as before, causing this gem to not work with Rails 5.

I'm using share buttons (javascript plugins). When I open a page it shows that buttons, but when I open other page it disappear. It appear again when i refresh website. It working properly with jquery.turbolinks and without turbolinks gem, but without it website is very slow. How to make website faster? My website, now plugins is working, because I removed turbolinks.

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require lightbox
//= require_tree .
//= require turbolinks

application.html.erb javascript plugins

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-588e44a9401a6d9f"></script>
<script type="text/javascript" id="st_insights_js" src="http://w.sharethis.com/button/buttons.js?publisher=630cdfb3-b6c5-4da7-a389-1c7d5340827d"></script>
<script type="text/javascript">stLight.options({publisher: "630cdfb3-b6c5-4da7-a389-1c7d5340827d", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

Gemfile

gem 'jquery-turbolinks'
gem 'turbolinks', '~> 5.0.1'

I tried to add one plugin in javascript file, but result same

$(document).on('turbolinks:load', function(){
  stLight.options({publisher: "630cdfb3-b6c5-4da7-a389-1c7d5340827d",      doNotHash: false, doNotCopy: false, hashAddressBar: false});
});

Thank you for any help.

After following all the instructions i am getting this error
"Sprockets::FileNotFound in StaticPages#home
Showing /home/abhinay/rails_projects/sample_app/app/views/layouts/application.html.erb where line #9 raised:

couldn't find file 'jquery.turbolinks'
(in /home/abhinay/rails_projects/sample_app/app/assets/javascripts/application.js:16)

"
can you please tell me what is Happening here.

Adding jquery.turbolinks causes JQuery itself to crash, saying "Uncaught TypeError: Cannot read property 'length' of undefined"

My application.js:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require angular/angular.min
//= require angular/angular-route.min
//= require jquery-ui.min
//= require chosen-jquery
//= require bootstrap
//= require conversations
//= require analytics
//= require common
//= require jquery.infinite-pages
//= require jquery.contenthover
//= require overlay
//= require tag-it.min
//= require_tree .
//= require_tree ../../../vendor/assets/javascripts/.
//= require turbolinks

The function in question where it crashes:

merge: function( first, second ) {
    var len = +second.length,
        j = 0,
        i = first.length;

    while ( j < len ) {
        first[ i++ ] = second[ j++ ];
    }

    // Support: IE<9
    // Workaround casting of .length to NaN on otherwise arraylike objects (e.g., NodeLists)
    if ( len !== len ) {
        while ( second[j] !== undefined ) {
            first[ i++ ] = second[ j++ ];
        }
    }

    first.length = i;

    return first;

Adding this js file as a seperate file to the turbolinks gem, so users can optionally require it for js would not be a bad idea.

View the discussion here towards the bottom.

turbolinks/turbolinks-classic#78 (comment)

If the page has already loaded, when a callback is added, it should be triggered immediately
This is jQuery behaviour, but is not jquery.turbolinks behaviour

Try running this with / without jquery.turbolinks:

$ -> console.log('triggered') 

When using coffee script, every "module" is automatically wrapped on a $(function() {})

what should I do to overcome this behaviour?
https://github.com/kossnocorp/jquery.turbolinks#events-firing-twice-or-more

When I track the repo to master, jquery.turbolinks is breaking all my data-remote="true" links. I don't know if this is a known issue yet.

The Affix plugin launches for any element that has data-spy="affix" but this is not getting launched after navigation to a page.

Currently have:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require underscore.1.6.0
//= require backbone.1.1.2
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers
//= require_tree ../templates
//= require turbolinks

The Affix plugin has:

// AFFIX DATA-API
  // ==============

  $(window).on('load', function () {
    $('[data-spy="affix"]').each(function () {
      var $spy = $(this)
      var data = $spy.data()

      data.offset = data.offset || {}

      if (data.offsetBottom) data.offset.bottom = data.offsetBottom
      if (data.offsetTop)    data.offset.top    = data.offsetTop

      $spy.affix(data)
    })
  })

It appears it is using window object instead of document. Thoughts?