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.
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
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?
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
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
I have several javascript plugins in my app already and they work find (select2, bootstrap-datetimepicker, ckeditor, ace, chartkick)
trying to get jquery-ui running to add some sortable lists/tables.
Can't get Jquery-ui running in a rails 4 app...
# Gemfile
gem 'therubyracer', platforms: :ruby
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'non-stupid-digest-assets', '~> 1.0.4'
# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
// = require jquery.ui.all
# app/views/rates/show.html.erb
<ul id="rates">
<% #plan.rate_items.each do |rate| %>
<%= content_tag_for(:li, rate) do %>
<%= rate.name %>
<% end %>
<% end %>
</ul>
<%= content_for :page_javascript do %>
<script>
$(document).ready(function(){
$("#rates").sortable();
});
</script>
<% end %>
When I look at the console I just get:
TypeError: $(...).sortable is not a function
Looks like a typo with the '=' sign not touching ' //'
Change to
//= require jquery.ui.all
http://guides.rubyonrails.org/asset_pipeline.html
i think it should be:
# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.ui.all
//= require_tree .