Setting up ChartKick - Ruby beginner - ruby-on-rails

After reading http://chartkick.com/ I've tried to add chart to my website
Gemfile:
...
gem 'chartkick'
...
index.html.erb:
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
<%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
<h1>Hello, Rails!</h1>
assets/javascript/application.js:
//= require chartkick
//= require jsapi
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
But all I've got is:
undefined method `pie_chart' for #<#:0x4e49bd8>
I use chartkick (1.2.4), ruby(1.9.3), rails (4.1.0). What should I do?

I would need to look into chartkick further if this isn't the fix, but restart your Rails server and try again.

I had the same issue, for Chartkick to work I had to put the:
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
in the the application.html.erb file only not the index file, under the head attribute
<head>
...
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
</head>
And it was then usable in the whole application, we also found it to be more reliable when it was in the application.html.erb file.

Related

Bootstrap4 with Rails 5

I followed the official guide and this post to no help, can someone shed some light on this? (source on github)
My Gem file:
...
#bootstrap
gem 'bootstrap', '~> 4.0.0.alpha3.1'
gem 'sprockets-rails', :require => 'sprockets/railtie'
source 'https://rails-assets.org' do
gem 'rails-assets-tether', '>= 1.1.0'
end
...
my application.scss:
#import 'bootstrap-sprockets';
#import 'bootstrap';
my application.js:
//= require jquery
//= require tether
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title>DankDist</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
and Finally, my index.html.erb:
<h1>Scale#index</h1>
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<p>Hello Worldzz</p>
<p>Find me in app/views/scale/index.html.erb</p>
<%= params[:id] %> <br/>
<%= #id %>
Next Page <%= #page +1 %>
<hr/>
<%= params.inspect %>
I ran Bundle, and re-tried rails s with no changes, the header doesn't contain any styles.
There's a few mistakes
ScaleController contains layout false - therefore your stylesheet import in your application.html.erb doesn't work
#import 'bootstrap-sprockets'; is not necessary for the Bootstrap 4 gem
in application.js, try to line these two lines as follows, i noticed it worked for me:
//= require jquery
//= require bootstrap-sprockets

Rails strong order of assets require

here is mobile.js
//= require jquery
//= require iui
//= require faye-updater
//= require anonymous-chat
//= require anonymous-vote
//= require_self
here is how i include scripts
<%= content_for :head do %>
<%= javascript_include_tag "#{Settings.faye.address}/client.js" %>
<%= javascript_include_tag "mobile" %>
<% end %>
and what i get after recompiling assets: mobile....js starts from
function launch_faye_updater....
this is function from the faye-updater.js and it must be included after jquery and iui. And it does not work because of wrong inclusion order. How to make Rails include assets in right order ?
UPD: This is in production mode Rails 3.2.8
Where is launch_faye_updater being called from?
I'm guessing you can fix this problem by moving this line:
<%= javascript_include_tag "#{Settings.faye.address}/client.js" %>
Down below the other include, like so:
<%= javascript_include_tag "mobile" %>
<%= javascript_include_tag "#{Settings.faye.address}/client.js" %>
(You may also want to consider creating a new compiled JS file with these two files in it.)
I had the same problem with my jquery, bootstrap and application dependencies. You can deliver all your JS modules in preferred order in Rails 3.1+. In your example you want to have jquery.js included before mobile.js.
First, remove jquery from your mobile.js file.
Then you need to add following line of code to your application.rb:
config.assets.precompile += ['mobile.js', 'jquery.js', 'jquery_ujs.js']
At this moment you have everything precompiled and ready to use. Your mobile.js doesn't include jquery, so you can include it in your preferred order:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "mobile" %>
And that's it!

Rails + jQuery ajaxPrefilter

I have a Rails 3.1 application
In my gemfile:
gem 'jquery-rails', '>= 1.0.12'
In my assets/application.js, I have:
//= require jquery
//= require jquery_ujs
//= require_tree .
In my application.html layout, I've included these lines
<%= javascript_include_tag "application" %>
<%= javascript_include_tag "jquery.min" %>
I'm using jQuery v1.6.2.
The problem is, when I try to access any page, I keep getting these errors in the console:
Uncaught TypeError: Object function (selector,context){return new jQuery.prototype.init(selector,context);} has no method 'ajaxPrefilter' (:3000/assets/jquery_ujs.js?body=1:290)
Uncaught TypeError: Cannot read property 'setOffset' of undefined (:3000/assets/jquery-ui-1.8.18.custom.min.js?body=1:37)
Uncaught TypeError: Object function (a,b){return new jQuery.prototype.init(a,b)} has no method 'ajaxPrefilter' (application.js:12)
What is ajaxPrefilter, and how do I fix these errors?
I've tried to reorder the javascripts with loading jquery.min.js before application.js, no luck, and I'm not sure how to inspect those errors in the js files themselves.
Try this:
<%= javascript_include_tag "application" %>
<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" %>
<%= javascript_include_tag "http://code.jquery.com/ui/1.8.19/jquery-ui.min.js" %>

jQuery gets included twice

I have a problem in my rails app that jQuery is included twice. Once it's referenced normally with a script tag and once minimized inside application.js. I noticed it because the destroy confirmation messages were popping up twice.
So is there a way to turn off the minimized version locally?
My head looks like:
<head>
<title>Wirent</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
My application.js looks like:
//...
//= require jquery
//= require jquery_ujs
//= require_tree .
It's because I pre-compiled my assets. So assets were also being loaded from public/assets.
This answer explained it: https://stackoverflow.com/q/7778048/145117

How to require assets only for development environment

I'm using the assets pipeline from Rails 3.1 and I want to include some javascript files only if it's the development environment.
Example:
//= require application/jquery
//= require application/jquery_ujs
// next ones only for development environment
//= require application/badglobals
//= require application/consul
Its there a standar way of doing this? Any suggestions?
Update
Looking at the Sprockets current documentation, seems like there is not a way to do this.
Why not just require these in the view? Is it important that they are loaded in the asset? To load them in the view:
<% if Rails.env.development? %>
<%= javascript_include_tag "application/badglobals" %>
<%= javascript_include_tag "application/consul" %>
<% end %>
If you rename your application.js file (or whichever file you're calling //= require ... in) to application.js.erb, you can take advantage of require_asset. i.e:
//= require application/jquery
//= require application/jquery_ujs
<% if Rails.env.development? %>
<%= require_asset 'application/badglobals' %>
<%= require_asset 'application/consul' %>
<% end %>
Source: https://github.com/sstephenson/sprockets/issues/90

Resources