I have my javascript imports set up like this in my Rails app:
<script>
WebFontConfig = {
google: {
families: [
'Open+Sans:300,400:latin'
]
}
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js" />
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" />
<%= javascript_include_tag 'application' %>
My application.js.erb file is:
//= require jquery
//= require jquery_ujs
//= require modernizr.custom.44325
//= require jquery-backstretch/jquery.backstretch
//= require infinite-scroll/jquery.infinitescroll
//= require global
When I run the app, my fonts load but I get these errors shown in the console:
Uncaught ReferenceError: jQuery is not defined
jquery_ujs.js?body=1:400 Uncaught ReferenceError: jQuery is not
defined jquery.backstretch.js?body=1:378 Uncaught ReferenceError:
jQuery is not defined jquery.infinitescroll.js?body=1:815 Uncaught
ReferenceError: $ is not defined
I have tried reordering the imports and depending on the order one of a couple of things happens:
Fonts load but nothing else, jquery not defined errors.
Page half loads, with javascript and no fonts.
Any ideas on what could be going on? I've not had errors like this before?
Gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.12'
gem 'pg'
gem "flickraw", "0.9.6"
gem 'kaminari', "0.15.0"
gem 'bourbon'
gem 'simple_form'
gem 'sendgrid'
gem 'rdiscount'
gem 'haml'
gem 'slim', '~> 1.3.9'
gem 'naturalsorter', '0.2.2'
gem 'friendly_id'
gem 'awesome_print'
gem 'httparty'
gem 'nokogiri'
gem 'unicorn'
gem 'capistrano'
gem 'mechanize'
group :assets do
gem 'jquery-rails', '2.2.1'
gem 'sass', github: 'nex3/sass'
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'susy', '2.0.0.beta.3'
gem 'compass-rails', '>= 1.1.3'
gem 'compass', '~> 1.0.0.alpha.17'
end
group :development do
gem 'better_errors'
gem 'binding_of_caller'
end
group :test do
gem 'turn', require: false
gem 'faker'
gem 'capybara'
gem 'database_cleaner'
gem 'launchy'
gem 'simplecov'
gem 'spork-rails'
gem 'guard-rspec'
gem 'guard-spork'
end
group :development, :test do
gem 'rspec-rails'
gem 'shoulda'
gem 'factory_girl_rails'
end
Solved this. It wasn't liking the self closing script tags. Changed them to <script> and </script> and it's working perfectly now.
Related
Gemfile:
source 'https://rubygems.org'
ruby '2.6.6'
gem 'rails', '5.0.2'
gem "pry"
gem 'aasm'
gem 'figaro', '~> 1.0.0'
gem 'sucker_punch' , "~> 1.0"
gem 'stripe'
gem 'square.rb'
gem 'gon'
gem 'twilio-ruby'
gem 'nokogiri'
gem 'lograge'
gem 'sass-rails'
# # Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
# gem 'coffee-rails', '~> 4.0.0' # doesn't work with rails 5
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
gem 'platform-api'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
group: development do
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
gem 'pg', '~> 0.18'
group :production do
gem 'rails_12factor', '0.0.2'
gem 'newrelic_rpm'
gem 'puma'
gem 'rack-timeout'
end
group :test do
gem 'rspec-rails', '~> 3.5'
gem 'factory_girl_rails'
gem 'selenium-webdriver'
gem 'capybara'
gem 'faker'
gem 'launchy', '~> 2.4.2'
gem 'database_cleaner'
gem 'jasmine', "2.6"
gem 'jasmine-jquery-rails'
end
This is how my JS folder is organized
> assets/javascripts
> 0_global
> utility.js
> ...
> 2_place_order
> cart.js
> item.js
> ...
> 0_global.js
> 2_place_order.js
Where the top-level .js files in the assets/javascripts folder require the corresponding directory. I.e.,
0_global.js
//= require_directory ./0_global
2_place_order.js
//= require_directory ./2_place_order
I'm having trouble getting this set up to work with my jasmine. So in jasmine.yml, I required the top-level js file, figuring that since that file already requires the directory, it should load, but it does not. I.e., the below doesn't work:
src_files:
- assets/0_global.js
- assets/2_place_order.js
Is there a different way to get this to work? I have also tried:
src_files:
- assets/0_global/*.js
- assets/2_place_order/*.js
To require the directory from the set up jasmine.yml but this didn't work either. Would like to try to not have to enumerate every js file in the subdirectories.
Thanks!
I don't know anything about jasmine, but looking at the homepage it seems that the jasmine.yml would expect strings to be quoted:
# minimalist jasmine.yml configuration when leveraging asset pipeline
spec_files:
- "**/*[Ss]pec.{js,coffee}"
I am working on a new Rails project and trying to integrate a theme. However, the theme is using .tooltip in its .js file, and Rails is giving me the following error:
Uncaught TypeError: $(...).tooltip is not a function
Here is my app/assets/javascripts/application.js file:
//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require activestorage
//= require theme/inspinia.js
//= require theme/metisMenu.js
//= require theme/jquery.slimscroll.min.js
which looks very identical to a previous Rails app that I have.
Here's the Gemfile:
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.5.1'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
gem 'bootstrap-sass', '~> 3.3.7'
gem 'font-awesome-rails'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.3.6'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
# Easy installation and use of chromedriver to run system tests with Chrome
gem 'chromedriver-helper'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
# Jquery
gem 'jquery-rails'
gem 'jquery-ui-rails'
# Used for server-side processing of datatables.
gem 'jquery-datatables-rails'
gem 'ajax-datatables-rails'
I read in other posts here that this is usually caused by jquery being called multiple times, but I'm unable to determine where this is happening at. If I try to render a blank page, I still get the error, so I'm not sure it's anything in the HTML causing it. I must be missing something or have something in the wrong order.
If I remove theme/inspinia.js from the app/assets/javascripts/application.js file, then it no longer appears. However, I still get the error if I call it manually. This is where it's being called in the app/assets/javascripts/theme/inspinia.js file:
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
});
You didn't load the jquery ui in your project.
Load jquery-ui before the inspina.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require dataTables/jquery.dataTables
//= require activestorage
//= require theme/inspinia.js
//= require theme/metisMenu.js
I'm running Rails 4.2.3 with the 'foundation-rails' 5.5.2 gem and am not able to get it running on Heroku. My app is working fine locally, but when trying to deploy my app to Heroku with Foundation 5 the javascripts are not loading.
The CSS looks ok on Heroku, but things like modals are not working, and the console doesn't show that there are any javascripts running that were specified in my application.js file.
Modernizr.js and Jquery-2.1.4 are running
I'm not seeing any errors anywhere, and I have precompiled assets using bundle exec rake assets:precompile and the assets appear to have been precompiled.
How do I get the javascripts to load so that the page will work properly?
application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.serializeJSON
//= require jquery.bind_with_delay
//= require_tree .
//= require_self
//= require gifffer.min
//= require imagesloaded.min
//= require google.jsapi
//= require foundation
//= stub bookmarklet/modal_bookmarklet
$(function() {
$(document).foundation();
});
production.rb
config.cache_classes = true
config.eager_load = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_files = true
config.assets.js_compressor = :uglifier
config.assets.compile = true
config.assets.digest = true
gemfile
source "https://rubygems.org"
gem "rails", "4.2.3"
gem "unicorn"
gem "mysql2", ">= 0.3.14"
gem "pg"
gem "thinking-sphinx", "~> 3.1.2"
gem "jquery-rails"
gem "dynamic_form"
gem "exception_notification"
gem "bcrypt", "~> 3.1.2"
gem "nokogiri", "= 1.6.6.2"
gem 'mini_portile', '~>0.6.2'
gem "htmlentities"
gem "rdiscount"
gem "oauth"
gem "mail"
gem 'metainspector', :git => 'https://github.com/jaimeiniesta/metainspector.git'
gem 'material_icons'
gem "bower-rails","~> 0.9.2"
gem 'launchy'
gem 'sass', '~> 3.4.15'
gem 'foundation-rails', '~> 5.5.2'
gem 'compass', '~>1.0.3'
gem "uglifier", ">= 1.3.0"
gem 'coffee-rails', '~> 4.1.0'
gem 'modernizr-rails', '~>2.7.1'
gem 'jbuilder', '~> 2.3.0'
gem 'multi_json', '~>1.11.1'
gem 'rails_12factor'
gem 'paperclip', :git => "git://github.com/thoughtbot/paperclip.git"
gem 'aws-sdk'
gem 'figaro'
gem 'omniauth-facebook'
gem 'pg_search'
gem 'kaminari'
gem 'ejs'
gem 'yt', '~> 0.25.0'
group :doc do
gem 'sdoc', require: false
end
group :test, :development do
gem "rspec-rails", "~> 3.3.2"
gem "machinist"
gem "sqlite3"
gem "faker"
gem 'annotate'
gem 'better_errors'
gem 'binding_of_caller'
end
edit
It looks like I'm getting an error that says "Uncaught TypeError: $(...).foundation is not a function". I'm not sure if this is related to Heroku or my configuration. Why would this work locally, and not on Heroku?
You have your require_self call before you load the foundation JS and you are trying to use the foundation JS in your manifest file. Try moving the require_self directive after all of your other directives.
I have a newish Rails 4 app which contains no custom Javascript - the folders app/assets/javascripts, lib/assets/javascripts and vendor/assets/javascripts are all empty (apart from app/assets/javascripts/application.js).
When I click around the app I keep getting the error jquery-ujs has already been loaded! in the JS console. It happens every time I hit the "back" button, and sometimes when I click a normal link (although I can't make it happen consistently.)
application.js:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
When I remove turbolinks from application.js, I stop getting the error... so turbolinks appears to be the culprit.
Is this a bug with turbolinks, or am I doing something wrong?
Here's my Gemfile:
source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails', '4.0.0'
gem 'active_model_serializers'
gem 'aws-sdk'
gem 'bootstrap-sass-rails'
gem 'coffee-script-source', '1.5.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'devise'
gem 'factory_girl_rails', '4.1.0'
gem 'figaro'
gem 'font-awesome-sass-rails'
gem 'jbuilder', '~> 1.2'
gem 'jquery-rails'
gem 'paperclip'
gem 'paperclip-meta', github: 'y8/paperclip-meta'
gem 'pg'
gem 'sass-rails', '~> 4.0.0'
gem 'turbolinks'
gem 'uglifier', '>= 1.3.0'
group :production do
gem 'rails_12factor'
end
group :doc do
gem 'sdoc', require: false
end
group :test do
gem 'capybara', '2.1.0'
end
group :development, :test do
gem 'childprocess', '0.3.9'
gem 'debugger'
gem 'faker', '~> 1.2.0'
gem 'json_spec'
gem 'rspec-rails'
gem 'rspec-mocks'
end
group :development do
gem 'annotate'
gem 'hirb'
gem 'wirb'
end
Changing around the order of the requires in application.js doesn't seem to help either.
The most likely explanation is that you're including your scripts in the page body.
See this issue for more: https://github.com/rails/turbolinks/issues/143
From the turbolinks readme:
As a rule of thumb when switching to Turbolinks, move all of your javascript tags inside the head and then work backwards, only moving javascript code back to the body if absolutely necessary. If you have any script tags in the body you do not want to be re-evaluated then you can set the data-turbolinks-eval attribute to false:
<script type="text/javascript" data-turbolinks-eval=false>
console.log("I'm only run once on the initial page load");
</script>
I faced the same issue and after doing some hit and trial i found the sequence of javascript files matters.
The working sequence is
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
Hope, this solution will help someone.
The problem that I had It was that I copied the <%= render 'layouts/head'%> twice!, in the head and in the body. check the laouts/application.html.erb file
For me, I had included these written twice so it was loading twice. Once in application.js //= require jquery and once in application.html.erb as a script tag.
I'm trying run my app on heroku in producer environment, but my javascript does not working there.
I my development environment it was working fine. So when i pushed it to heroku it sets down.
My gem file is that:
source 'https://rubygems.org'
ruby '1.9.3'
gem 'rails', '3.2.6'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'bourbon'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
gem 'asset_sync'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer'
gem 'twitter-bootstrap-rails'
end
group :production, :staging do
gem 'unicorn'
gem 'pg'
gem 'fog'
gem 'newrelic_rpm'
end
group :development, :test do
gem 'rspec-rails', '~> 2.8.0'
gem 'webrat', '~> 0.7.3'
gem 'simplecov'
gem 'sqlite3'
end
gem 'heroku'
gem 'jquery-rails'
gem 'simple_form', :git => 'git://github.com/plataformatec/simple_form.git'
gem 'devise'
gem 'friendly_id', '~> 4.0.1'
gem 'validates_cnpj'
gem 'RedCloth'
gem 'best_in_place'
gem 'delocalize'
gem 'carrierwave'
gem 'rmagick'
gem 'geocoder'
gem 'kaminari'
gem 'simple-navigation'
gem 'omniauth-facebook'
gem 'koala'
gem 'whenever', :require => false
gem 'delayed_job_active_record'
So my assets is compiled correctly, no errors, and all them are send to amazon s3.
if i put the line on the head of HTML, some javascript begin to work.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
in my app there is a gmaps, when I debug my app I found that the javascript just works where was the map, so I put this line above on the head and the javascript begin to work.
Someone can help me with it? I don't know why this problem in my app.
thanks