reed / turbolinks-compatibility

A collection of tutorials for how to get your favorite javascript libraries, plugins, and snippets working with Turbolinks.

Turbolinks Compatibility

reed.github.io/turbolinks-compatibility

---

A collection of tutorials for how to get your favorite javascript libraries, plugins, and snippets working with Turbolinks.

All submissions are encouraged. To submit a change, fork this repo, commit your changes and send me a pull request.

Setup

The site is built with nanoc. Use bundler to install it along with the other necessary gems:

$ bundle install

You can see the available commands with nanoc:

$ nanoc -h

Check out the nanoc documentation to get started.

Ruby 1.9 is required to build the site.

Development

Nanoc compiles the site into static files living in ./output.

$ nanoc compile
Loading site data... done
Compiling site...
	create  [0.25s]  output/index.html
	create  [2.07s]  output/facebook.html
	create  [0.01s]  output/fancybox.html
	create  [0.01s]  output/google_analytics.html
	create  [0.03s]  output/map_generator.html
	create  [0.02s]  output/olark.html
	create  [0.01s]  output/stripe.html
	create  [0.02s]  output/twitter.html
	create  [0.00s]  output/css/bootstrap_custom.css
	create  [0.00s]  output/css/github.css
	create  [0.00s]  output/css/style.css
	create  [0.00s]  output/images/bg.gif

Site compiled in 2.47s.

To view the site, launch Webrick via nanoc:

$ nanoc view

If you get tired of manually compiling, use autocompile, which will launch the webserver and compile (or recompile) each file when you request it.

$ nanoc autocompile

Style Guide

The libraries folder contains a markdown file for each solution. There are a couple structural requirements for these files:

Page Title

The top of each file should include a nanoc title attribute declaration.

---
title: "Facebook"
---

This title will be used for the page's <title> element and the menu pane on the left side of the page.

Page Header

Begin the markup with a top-level header for the page header.

# Facebook Social Plugins

This element will receive special styling, as you can clearly see on the site.

All top-level headers in the markup will be wrapped inside a hero unit, so I recommend against using any after the page header.

Markdown

Markdown files are rendered with Redcarpet and the Github Flavored Markdown filter. Therefore, fenced code blocks with syntax highlighting are supported.

Deployment

The site is hosted with Github Pages.

After compiling the site, the contents of the ./output directory will be pushed to this repo's gh-pages branch.

Contributing

Having trouble getting a third-party javascript library to work with Turbolinks? Create an issue, and we'll see if we can come up with a solution together.

If you have a solution you would like added to the site, or know of a better way to implement an existing solution, submit a pull request for it. Please submit them to the master branch, not the gh-pages branch. After merging, I'll compile and deploy the site to gh-pages.

turbolinks-compatibility's Issues

Marketo munchkin tracker integration request

I am currently using the following code, but I was wondering if there is a recommended setup.

<script type="text/javascript">
$.ajax({
  url: '//munchkin.marketo.net/munchkin.js',
  dataType: 'script',
  cache: true,
  success: function() {
    Munchkin.init('123-ABC-456', {asyncOnly: true});
  }
});
</script>

This code is placed in the body of each page, so I am essentially avoiding turbolinks, is this what everyone else is doing?

Loading Javascripts Problem

I have an rails application page with new & edit functionality on the same page. That includes radion buttons and check boxes. When redirecting to that page the javascripts files are not loading automatically instead it is expecting reload of javascripts to load the functionality for edit action.

Please resolve this issue.

Thanks in Advance

Any idea how to fix Google Plus embeds with turbolinks?

Tinymce not loaded on textareas

Tinymce WYSIWYG editor plugin not loaded to textareas if turbolinks (or jquery-turbolinks) is enabled

Facebook comments not appending to DOM

I am able to load the comments snippet when loading page from cache, but when commenting, I am unable to see that particular comment until refresh

Google Charts compatibility

Has anyone gotten turbolinks and Google Charts to play friendly together? There is a callback provided (google.setOnLoadCallback) that probably needs a hook, but I'm not sure where to start.

Thanks.

LiveChat using example code throws "ReferenceError: LC_API is not defined" errors in production

Working off the example LiveChat code, I am getting errors in production (though not in development mode, which I expect is because TurboLinks isn't active in development).

Error is coming from inside the LiveChat tracking.js
"ReferenceError: LC_API is not defined" tracking.js (line 2, col 15327)

    <% if current_user %>
      <script type="text/javascript">
        var __lc = {};
        __lc.license = #######;
        __lc.params = [
          { name: "Name", value: "<%= current_user.name %>" },
          { name: "Email", value: "<%= current_user.email %>" },
          ];

        (function() {
          delete(window.LC_API);
          delete(window.LC_Invite);
          delete(window.__lc_iframe_current_skill);
          delete(window.__lc_inited);
          delete(window.__lc_lang);
          var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
          lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
          var s = document.body.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
        })();
      </script>
    <% end %>

Believe that since this is coming from the generated iframe that many users won't see it, and it seems to be working correctly from my smoke tests, but wanted to make sure there isn't an iceberg hiding in these waters.

(I don't believe this is likely to be a browser-dependent issue, but in the event I'm off-base there I am on Firefox 39, on fully-updated Yosemite)

Olark Explanation Link is gone

Is there a mirror for the explanation that was hosted on Posterous?

facebook like firing multiple times after new page load

For facebook compatibility, I'm wondering if the $ -> is necessary.

When using /kossnocorp/jquery.turbolinks, it will cause the facebook like callback to be called multiple times, sometimes resulting in infinite loop of this error

Unsafe JavaScript attempt to access frame with URL http://cosite.dev/en/photos/1 from frame with URL https://www.facebook.com/plugins/like.php?api_key=572519912762386&locale=en…t=standard&colorscheme=light&show_faces=true&extended_social_context=false. The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'http'. Protocols must match.

According to this, it is a known error and the way to solve it is moving document binding outside of a $(function()) block.

I've tested the binding without $ -> and it seem to work fine with or without jquery.turbolinks.

What do you think?

Can't find a way to change Facebook language

I used this example (http://reed.github.io/turbolinks-compatibility/facebook.html) to setup Facebook in my project, however I can't find a way to load the other SDK when I change the locale.

Since Facebook language change seems to only work by loading a specific SDK, I don't see a better way than to reload the new one.

bootstrap-scrollspy

Scrollspy records certain offsets and triggers event when those elements are been scrolled over.

It has a "refresh" method to calculates offsets again after an partial ajax update but it doesn't work well if the whole DOM is been replaced.

What happened is that all page's scrollspy are working simultaneously on the last turbolink page. Messed up.

I tried to reset scrollspy on page:fetch but didn't get it right.

Sorry that I don't have enough time to explain in more details. Just to at least let you know that there is a problem.

Live Chat (livechatinc.com) breaking with turbolinks

Hey,

Livechat provides this code:

var __lc = {};
__lc.license = 3989411;

(function() {
    var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
    lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
})();

to drop inside a script tag inside your body.

At the moment, I can see it on the first page, but I lose it once turbolinks runs. I tried it inside a function that runs on page:load but get errors with that as well. I'll keep trying but any help you could give would be great.

Olark needs to also load on ready()

The current js doesn't create the olark frame when I first load the page (but does work on subsequent page loads). I had to also bind to document ready to get it working

My modified code looks like:

function initOlark(){
  c = {
    loader: "static.olark.com/jsclient/loader0.js",
    name: "olark",
    methods: ["configure", "extend", "declare", "identify"]
  };
  // init function
}

var ready = function() {
  initOlark();
  olark.identify(''); // identity
};

$(document).bind('page:load', ready);
$(document).ready(ready);

Google+ errors

I'm following all steps, but I am getting the following error:

Would anyone help me?

Zopim language reset

When I first load the zopim widget it looks ok but when I navigate on my website, the language looks modified (default value?)

Google Adsense over https

The solution illustrated here works great, but not for pages over https. I'm getting the following error:

[blocked] The page at https://domain.com ran insecure content from http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-331342934991185…680&u_cd=24&u_nplug=9&u_nmime=64&biw=1680&bih=469&fu=0&js=uds&eid=37464000.

I understand from this post that AdSense over https is fairly new.

I tried to find any documentation on the javascript AdSense API but with no succes. Is there even an official javascript AdSense API?

Facebook like/share button still disappearing

I am having the same issue as here: http://stackoverflow.com/questions/20853891/facebook-and-twitter-widgets-disappear-on-navigation-rails

I removed the official script, added the solution and included my app ID but my share/like buttons still disappear when navigating.

Google Analytics recipe typo?

I believe the Google Analytics recipe is worded backwards -- you want to make sure your Google Analytics snippet is in the head, not the body, so it only gets executed once, on the initial page load.

As the recipe is worded -- moving the snippet from the head to the body -- Google Analytics will be initialized every time the document body is updated via Turbolinks.

The rest of the recipe makes sense.

fancyBox 2.1.5

Hi,

due to the statement about fancyBox > 2.1.2 here http://reed.github.io/turbolinks-compatibility/fancybox.html im posting this issue.

There are some problems with v2.1.5 and Turbolinks. They were mentioned eariler here in wrong issue turbolinks/turbolinks-classic#96 (comment). @antpaw also wrote there a partial solution.

So I just want to let you know fancyBox 2.1.5 doesn't work with Turbolinks without modifications and I haven't find 100% solution yet.

Turbolinks 5 compatibility

First off, thanks for building this excellent resource! It has saved me some time.

Second, as you probably know, the new version of Turbolinks uses completely different events. So none of the solutions you have here are applicable for Turbolinks 5.

I've reworked the Twitter & FB solutions to work with Turbolinks 5. Maybe start a turbolinks-5 branch or something that I could submit PRs to? Or a separate repo for turbolinks 5?

Pintrest pin button does not work with Turbolinks

Official implementation of Pintrest's pin button is currently not Turbolinks compatible 👎

Integration with Google TagManager

The official implementation of Google is that:

   <!-- Google Tag Manager -->
   <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
         height="0" width="0" style="display:none;visibility:hidden"></iframe>
   </noscript>
   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
       new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
       j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXX');
    </script>
    <!-- End Google Tag Manager -->

I tried a variety of ways through the events page: load and page: change. But I could not.

Can someone help me?

Zendesk turbolinks script doesn't work

Turbolinks does not work with the zendesk script contributed. When you navigate away from the current page by clicking on a link, the zendesk widget does not persist between pages.

Github embedded gists do not work with turbolinks

Have you guys figured out a solution to this? They load normally but when accessed through turbolinks they do not show up.

Embedded gists have special needs too. Often times you'll embed 5 different files one at a time per gist in a typical blog article and there might be hundreds of distinct gist URLs across many articles.

resizable chart with morris.js

In morris.js site there is a very simple example on how to make a chart: http://morrisjs.github.io/morris.js/#getting_started

If you open a page with this, and after that click a link to load other page and resize the browser window, the browser will hang and memory will start to increase very fast (tested in firefox).

Rails 4 - Turbolinks - MathJax

Hi, I have a Rails4 app which uses MathJax. I use MathJax CDN by placing the following line in the <head> section of my app/views/layouts/application.html.erb file:

<script type="text/javascript" src="path-to-mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

More information on: http://docs.mathjax.org/en/latest/start.html#mathjax-cdn

Because of Turbolinks, MathJax loads only on the homepage and won't load on other pages unless I refresh the page (which is not desirable). Instead I want MathJax to load only on /Math/New and Physics/Show pages. What should I do?

Thanks a lot for your help.

Turbolinks not working with google ads or LiveHelpNow

In our Rails 4 application with turbolinks enabled Google ads and the LiveHelpNow javascript code does not get loaded on any pages until you click the browser refresh button. When I disable turbo links it works fine. Has anyone else had this issue.

The script tags are within the head tags in the application.html.erb file.

Google Analytics Track Outbound Links

Unclear how to implement this:

https://support.google.com/analytics/answer/1136920?hl=en

after implementing app/assets/javascripts/google_analytics.js.coffee

Perhaps an update to the documentation so it's more obvious.

Thanks!

ShareThis not working after installing Turbolinks and Jquery-Turbolinks

I've recently installed the turbolinks and jquery-turbolinks gems and now the ShareThis button doesn't popup like it used to when clicking.

I currently have these ShareThis scripts in my application.html.erb head:

<script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "redacted-redacted-redacted"});</script>

Here is the code on my show.html.erb page:

<span class='st_sharethis_custom'></span>

Any help is appreciated. Thanks!

Google Adsense strategy not supported by Google Loader

Hi there,

Great work on this repo. Thanks to you we've been able to implement fixes for a lot of services.

While integrating Adsense I tried the strategy documented here: http://reed.github.io/turbolinks-compatibility/google_adsense.html. Locally the browser show a white page. It seems to be loading a blocking script from <script src="http://www.google.com/uds/?file=ads&amp;v=1" type="text/javascript"></script> initialised by the google.load 'ads', '1' call. Is the implementation still working for folks?

The Google Loader Developer's Guide doesn't mention the ad service, so it got me wondering if it's still officially supported.

EDIT: The Adsense compatibility code is based on http://www.redkart.com/google_adsense.html. That page states: "Dislaimer: Google cancelled this program, so this no longer works. But, you can check the source of this page to see what used to work." :(

https://github.com/gazay/gon

I'm hoping I can figure out a way to use https://github.com/gazay/gon with turbolinks.

It seems like gon is putting the info in the global window

Happyfox Chat loading problem after language change

I have a problem integrating the Happyfox Chat widget on my website. The standard procedure is to add the following code at the bottom of the body-area on the website:

<script> window.HFCHAT_CONFIG = { EMBED_TOKEN: "yourEmbedToken", ACCESS_TOKEN: "yourAccessToken", HOST_URL: "https://happyfoxchat.com", ASSETS_URL: "https://d1l7z5ofrj6ab8.cloudfront.net/visitor" }; (function() { var scriptTag = document.createElement('script'); scriptTag.type = 'text/javascript'; scriptTag.async = true; scriptTag.src = window.HFCHAT_CONFIG.ASSETS_URL + '/js/widget-loader.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(scriptTag, s); })(); </script>

The problem is, that it is getting reloaded several times, when I change the language (via the I18n rails gem).

Does anybody know any solution to that problem?

Thanks!

Google Universal analytics in head

Hi @reed,

In this article: http://reed.github.io/turbolinks-compatibility/google_universal_analytics.html it is recommended to place the code right under the opening <body> tag. However, now google suggests to place it right above the closing </head> tag: https://developers.google.com/analytics/devguides/collection/analyticsjs/

To begin tracking a website using analytics.js, paste the following JavaScript snippet into your website templates so that it appears before the closing tag.

I tried to move it there, but now Google does not track anymore the page change (at least in the real time view in Google Analytics).

My question is, isn't having the snippet in the <head> section the same as having the code in the <body> section with data-turbolinks-eval="false"? Technically, both will only be loaded once no?

Thanks!

Referral SaaSquatch compatibility

One of our customers said that they were unable to get squatch.js to work with Turbolinks. Here's a JsFiddle demo of loading the javascript iframe widget with example values. http://jsfiddle.net/loganvolkers/e6YAJ/

Is there a simple change to squatch.js or our install script that would make us Turbolinks compatible? I'm not well acquainted with Turbolinks, but I do know PJAX.

Embedded twitter timeline widget breaks with back button

The provided JavaScript code allows Twitter share buttons to work with turbolinks, but the embedded timeline widget doesn't reload when navigating with the back button.

The adsense code need to reset some Google variables on clearAds().

I encounter a problem and share my research here to you.

You need to reset at least few variables during the cleanup. Otherwise it will accumulate and Google will think you placed too many ads on the same page and therefore stop generating new ads.

    @ads = {}
    window.google_prev_ad_slotnames_by_region[''] = '' if window.google_prev_ad_slotnames_by_region   // yes, it's [''], google's hacky object
    window.google_num_ad_slots = 0

instantclick.js stops other jquery functions

I am using instantclick.js in my website but at the time when i include on the page near as below:

<script src="instantclick.min.js" data-no-instant></script> <script data-no-instant>InstantClick.init();</script>

then other jquery plugins do not work. For e.g, if i have autocomplete API by Google then it does not work and when i refresh the page then it starts working.

Can you please let me know why it is happening because when i remove instantclickthen all works fine?

Error in console is:

1. Uncaught TypeError: Object [object Object] has no method 'geocomplete' (For autocomplete)
2. You have included the Google Maps API multiple times on this page. This may cause unexpected errors. (For displaying address on google map)

New code for olark

The code you listed for olark didn't work for me. I have posted it gist of the code that is working.

https://gist.github.com/stevebooks/bd54a9438feab866e8b2

React Native

I posted the following on stack overflow with no answer. Perhaps turbolink-ios can help?

I am building a hybrid react-native + ruby on rails app. I am using the ```onNavigationStateChange``` in the ```WebView``` component to detect changes in the page, and use this to change the react-native navigation menu.  This works fine, but when I tried to use ```turbolinks```, there can be a change in the page but the ```onNavigationStateChange``` is not triggered.

The  ```onNavigationStateChange``` is triggered is with following code

      render() { 
        return (
          <WebView
            ref={'webview'}
            automaticallyAdjustContentInsets={false}
            source={{uri: SETTINGS_URL}}
            javaScriptEnabled={true}
            onNavigationStateChange={this.props.onNavigationStateChange}
            startInLoadingState={true}
            scalesPageToFit={true}
          />
        )
      }

This works normally, but if I turn on turbolinks, in the ROR app, the ```onNavigationStateChange``` no longer triggers.

How do I fix this?

Selenium IDE

This is a great site thank you.

Here is a problem I posted on Stackoverflow and no one answered within 7 days, so maybe it is a real issue.

When I run my selenium test without the turbolinks gem installed in my Ruby on Rails app, the tests pass. When I include turbolinks, the tests fail. For example if the test starts off

Open /
clickAndWait link=Sign in
type id=session_email [email protected]

Then I will get an error

"[error]Element id=session_email not found.

When I look at the page source, the session_email id is still there with turbolinks installed. I found this page, http://www.digitalkingdom.org/rlp/tiki-index.php?page=Selenium+And+Javascript, which seems to indicate there could be a problem with detecting the page has fully loaded.

Is there away to fix this without changing hundreds of lines in my test suites? If not, is there a reliable selenium method that can test that a turbolinked page has fully loaded?

Chris

Facebook needs App Id

The code to make the facebook like etc compatable requires a facebook app id, and a channel url. However, facebook likes do not require a facebook id, so to date I have not acquired one. How do you implement the code without an app id, and is the channel id just the page that you want the likes to go to?

Chris

pnotify

pnotify doesn't work after loading a page through turbolinks. Looking for a solution now, but thought I'd post this as well.

Update to Universal Analytics

https://support.google.com/analytics/answer/2790010?hl=en

jQuery Mobile with Stripe Checkout and Rails

I'd like to see a solution loading Stripe Checkout into a single jQuery Mobile "page".

I am using Rails and jQuery Mobile for my app. I would like to be able to load Checkout.js only on the payment page.

If I load Checkout with the script tag on a jQM page

<script src="https://checkout.stripe.com/checkout.js"></script>

then I get Uncaught ReferenceError: StripeCheckout is not defined in my browser console.

The only way I have solved this problem is by including the <script> in the <head> of my layouts/application.html.erb. However, since my users will only use the payment form once as a customer, I do not want to load in other pages of my app.

Please share your approach if you've used jQM, Stripe Checkout, and Turbolinks successfully!

Olark - some errors

Hello.

Thanks for your site. I don't know if I'm issuing in right place, but I implemented Olark widget by your solution and it is working, but I'm getting these errors and warnings:

This one is incrementing on each request:

WARNING: [framesocket] timed out while flushing to persistent storage

Sometimes I got:

ERROR: Uncaught TypeError: Object #<Object> has no method 'hlog' 

Olark is working, but I'm afraid of it will break browser functionality.

Should the solutions propose both coffee script and standart js version?

The title says it all 😉

Patching Framework7 for Turbolinks compatibility with Rails 4.1 variants?

I have been using Framework7 with Rails 4.1 variants and the UI is amazing. I have had to use some work arounds to replace the Rails form and link helpers which don’t work with Framework7, but have gotten as far as having CRUD working iOS style. It took me only one week to build what looks exactly like an iOS app with CRUD for 8 controllers. The performance is incredible, I have fooled some testers into thinking it is a native app, even running on an iPhone 4S (i.e. old hardware).

The problem is that I can’t get my pages to automagically reload the changes the CRUD makes to the DB, and Framework7’s routing, caching, and reloading relies heavily on manual event handler calls. It took me one week to build new templates for 8 controllers worth of CRUD, but I couldn’t get even one of them to reload properly after a couple days of work with Framework7's handlers.

In the recipes I have been using, Framework7 binds globals to the window object, so it is breaking Turbolinks.

window.F7H = {
  app: new Framework7(),
  dom: Dom7
};

window.Phone = {
  Views: {}
};

Phone.Views.Main = F7H.app.addView('.view-main', {
  dynamicNavbar: true
});

It looks to me like it might be fairly simple to patch this, but I am really a novice at this sort of thing. I also posted an issue on Framework7’s repository talking up Turbolinks and asking for their help.

Optimizely

Anyone else having problems with Optimizely and Turbolinks?

Google Tag Manager

Anybody had success with GTM and turbolinks? Should I use the same technique as Google UA?

Looks like D3.js would have to be added

I think I came across issues with d3.js and turbolinks in a Rails 4 app. Sometimes I get a "D3 is not defined" and the graphic generated by d3.jd does not load.

I'm not enough of a JS wiz to figure this out (though I am trying). For now I will file this and keep my updates as I find stuff, in case anyone of you JS wiz kidz can spot a solution.

Possibly useful info from d3/d3#1693:

as of D3 3.4.0 (...), D3 is exported via the define function rather than as a global.