Doesn't work with turbolinks #225

Open
blufiro opened this Issue Dec 4, 2015 · 10 comments

Projects

None yet

7 participants

@blufiro
blufiro commented Dec 4, 2015

I followed the installations instructions at https://github.com/ankane/chartkick#installation with google charts and the chart won't load when you first start the server. Once you reload the page, the chart will load. I learned that I had to add <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %> to app/views/layouts/application.html.erb after finding it on: http://stackoverflow.com/questions/19308820/chartkick-rails-4-undefined-method-pie-chart-for-class

Perhaps the installation instructions need to be updated?

@Marvelxy
Marvelxy commented Dec 4, 2015

Turbolinks has been a problem on rails applications running javascript. Turbolinks affects other javascript libraries as well; it affects jQuery plugins and other javascript libraries. Removing it from your project is the solution to this problem.

Because most developers using chartkick doesn't have turbolinks on their projects, they would not notice this issue; i didn't even notice it. Perhaps, chartkick should include it on the installation instruction like you said.

Check this blog out : http://engineering.onlive.com/2014/02/14/turbolinks-the-best-thing-you-wont-ever-use-in-rails-4/

it explains why you shouldn't use turbolinks.

@lachances

@bodrovis I'm having the same issue. jquery.turbolinks does not solve the problem. It seems like the chartkick javascript methods would need to be triggered on turbolinks:load

@bodrovis

@lachances That's strange, as everything works for me. Btw, the correct load order is:

//= require jquery
//= require jquery.turbolinks
//= require chartkick
...other stuff
//= require turbolinks
@lachances

@bodrovis Still no luck for me using this order.
Here's what I'm doing. Am I doing something wrong?

` <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag "//www.google.com/jsapi", "chartkick", 'data-turbolinks' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>`

application.js
//= require jquery //= require jquery_ujs //= require jquery.turbolinks //= require chartkick //= require tether.min.js //= require bootstrap-sprockets //= require_tree . //= require turbolinks

If I refresh the page, then all charts display properly. But if I navigate to any other page by means of a turbolinks-enabled link, the chart(s) won't load and will simply say "Loading...", with no errors or warning in the console.

@bodrovis
bodrovis commented Mar 1, 2016

@lachances Well, I have a bit different setup - I saved chartkick from Google JS API directly into my project's dir and load it from my application.js file.

Also, it's better to place jquery.turbolinks right after jquery. jquery_ujs is simply an adapter to process some rails-specific data-* attributes and can be placed beneath.

And not sure about having require_tree . above turbolinks. I just prefer to remove it completely and explicitly specify which files to load. So, you can try fully copying my setup and see if that helps. Not sure, what else can be done here to be honest.

@k1r8r0wn
k1r8r0wn commented Apr 29, 2016 edited

@blufiro Just add this to your chartkick'sjavascript_include_tag - 'data-turbolinks-track' => true. Also have a jquery-turbolinks gem installed (with it's correct structure of scripts requiring in application.js file). Finally restart the server.

@ankane
Owner
ankane commented Jan 7, 2017

I'm having trouble reproducing with the latest version of Chartkick. If this is still an issue, it'd be great if someone could create a new Rails app with the issue.

@david-a-wheeler

Fyi, jquery.turbolinks does not work with Turbolinks 5 (Rails 5): kossnocorp/jquery.turbolinks#56
See that thread for some solutions.

@bodrovis
bodrovis commented Jan 8, 2017

This thread was initialliy applied to Rails 4. For Turbolinks 5 you must listen to turbolinks:load event. In any case, I was unable reproduce this issue in Rails 4/5.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment