I created a new rails application and configured the chartkick , the chart is loading good in local. But its not loading when pushed to heroku.
Why its loading in development without any error and not loading in heroku? Any clues?
Application.js
//= require Chart.bundle
//= require chartkick
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
Gemfile
gem 'chartkick'
Applicaion.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Testp</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
index.html.erb
<h1>Test#index</h1>
<%= column_chart [['Sample1', 52.9], ['Sample2', 27.7], ['Sample3', 1.6]]%>
As I pointed out in comments, when facing issues like "something not defined" one should try to disable Uglifer (or any minification tool). Minification can break your code pretty often because it messes with variable names.
I don't have general solution for this issue (minification) but you can always google your specific case:
https://github.com/ankane/chartkick/issues/347
Related
I am a newbie for Ruby on Rails programming. Recently, I am using Rails 5.2.3 with turbolinks attached. Several days ago the turbolinks seems working fine. However, recently it throws the error of "Uncaught TypeError: window.scrollTo is not a function." I would like to know the alternatives of this problem.
I have tried rearranging the javascript orders of load but it does not seem to fix the issues
Here are the application.js files that I have
//= require jquery3
//= require rails-ujs
//= require turbolinks
//= require popper
//= require bootstrap
//= require moment
//= require cocoon
//= require underscore/underscore
//= require smoothscroll-polyfill/dist/smoothscroll
//= require sweetalert2/dist/sweetalert2.all.min
//= require_tree .
and the order I have on my application.html.erb
<head>
...
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
...
<%= javascript_include_tag 'sub/rails-gmaps' %>
<%= javascript_include_tag 'sub/rails-ujs-sweetalert2' %>
<%= javascript_include_tag 'sub/modules/popper' %>
<%= javascript_include_tag 'sub/modules/tooltip' %>
<%= javascript_include_tag 'sub/modules/owlcarousel2/dist/owl.carousel.min' %>
<%= javascript_include_tag 'sub/modules/cleave-js/dist/cleave.min' %>
<%= javascript_include_tag 'sub/modules/select2/dist/js/select2.min' %>
<%= javascript_include_tag 'sub/modules/mtr-datepicker/mtr-datepicker.min' %>
<%= javascript_include_tag 'sub/modules/chart.min' %>
<%= javascript_include_tag 'sub/owl' %>
<%= javascript_include_tag 'sub/dashboard' %>
<%= javascript_include_tag 'sub/custom' %>
</head>
Would like to know what would be the cause of window.scrollTo error on turbolinks. Because the error causes all of the javascript not to be loaded properly. Thank you very much
I'm starting to learn to use React with Rails. In application.html.erb I replaced
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
with
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
How do I require everything from the /assets/javascripts/application.js file?
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require cookies_eu
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap
Do I import them all at the beginning of the /javascript/packs/application.js file?
Based on a tutorial I watched, I can just keep also the:
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
Then everything will be loaded, though not via Webpack.
The reactJS components and javascript codes don't display on my rails 5 app. I'm using react-rails gem and some plain JS with the asset pipeline. Here's my application.js manifest:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require components
//= require init
//= require page_specific
//= require rails-ujs
//= require_tree .
I have sub-directories in my javascript assets directory and have referenced them appropriately and followed the ruby assets pipelines docs but when I run the server, the navigation bar and other element aren't displaying and clicking the button doesn't work either. See the screenshot:
screenshot
My assets files setup:
screenshot 2
This is my application.html.erb file:
<!DOCTYPE html>
<html ng-app="Stories">
<head>
<title>Stories</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= favicon_link_tag '', type: 'image/png' %>
<%= favicon_link_tag '', rel: 'apple-touch-icon', type: 'image/png' %>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="<%= controller.controller_name %> <%= controller.action_name %>">
<%= render 'layouts/overlay' unless user_signed_in? %>
<%= react_component('UserOverlay', {}) %>
<div data-behavior="progress-bar" class="progress-bar"></div>
<div class="container-fluid main-container">
<%= yield %>
<%= yield :sidebar %>
</div>
</body>
<script type="text/javascript">
window.userSignedIn = <%= user_signed_in? %>;
</script>
</html>
This is the assets.rb file:
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('node_modules')
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )
Am I missing another step?
Sorry for the question, as I'm a ruby and rails novice. How do I get the asset pipeline working on rails?
In my development enviroment I have this individual files of javascript and they are loaded normally in site/app/views/stats/index.html.erb:
<%= javascript_include_tag "/assets/jquery.js" %>
<%= javascript_include_tag "/assets/stats/donut.js" %>
<%= javascript_include_tag "/assets/stats/vbars.js" %>
<%= javascript_include_tag "/assets/stats/progress.js" %>
<%= javascript_include_tag "/assets/stats/gauge.js" %>
<%= javascript_include_tag "/assets/stats/hbars.js" %>
<%= javascript_include_tag "/assets/stats/widget_grid.js" %>
<%= javascript_include_tag "/assets/stats/widget.js" %>
In production enviroment it is not working. So I'm trying to get developer enviroment to use asset pipeline. Here's what I got so far:
In site/config/enviroment/development.rb I configured
config.assets.debug = false
config.assets.compile = false
config.assets.digest = true
Then stopped my rails server and ran
bundle exec rake assets:precompile
and restarted the rails server.
Then in site/app/views/stats/index.html.erb I just replaced the javascript includes for
<%= javascript_include_tag "stats" %>
and created a site/app/assets/javascripts/stats.js file that contains
//= require stats/donut
//= require stats/vbars
//= require stats/progress
//= require stats/gauge
//= require stats/hbars
//= require stats/widget_grid
//= require stats/widget
What am I doing wrong? Any help is appreciated.
Update: problem was happening because I forgot to include a third-party library inside stats.js. Originally had this include in site/app/views/stats/index.html.erb
<%= javascript_include_tag "/assets/third-party/d3.min.js" %>
Just had to remove that include and add this one to stats.js
//= require third-party/d3.min.js
Thanks for everybody who helped!
You have to tell Rails to precompile that file. By default it works with application.js but if you create a new manifest file, you have to include it. In config/initializers/assets.rb or production.rb add:
Rails.application.config.assets.precompile << ['stats.js']
Hope it helps.
This post is pretty helpful to understand how the asset pipeline works: http://www.reinteractive.net/posts/116-12-tips-for-the-rails-asset-pipeline
trying to learn rails (and I'm still really early on in my development) but I've hit a wall and I'm scratching my head.
I'm trying to leverage bootstrap via bootstrap-sass, and it seems like when I use the default bootstrap navigation bar I can get the bar to render - but it's not interactive. It looks like javascript isn't working properly, but I'm not sure why.
My gemfile:
source 'https://rubygems.org'
gem 'rails'
gem 'bootstrap-sass'
gem 'sprockets'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'
gem 'sdoc', '~> 0.4.0', group: :doc
group :development do
gem 'sqlite3'
gem 'spring'
end
group :production do
gem 'pg'
gem 'rails_12factor'
end
application.css
*= require_tree .
*= require_self
app/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
custom.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
config/application.rb
module FamilyLunch
class Application < Rails::Application
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end
application.html.erb
<html>
<head>
<title>Family Lunch | <%= yield(:title) %> </title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<%= render 'layouts/header' %>
<div class='container'>
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
</html>
For the JavaScript you have to add //= require bootstrap-sprockets to application.js like this :
app/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
For Solidus create an app/assets/spree/frontend/all.js and include:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
this will override the app/assets/application.js