We Keep Coding

Rails not seeing .tooltip method even with jQuery included

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

Javascripts not working on Heroku Rails 4.2 deploy with Zurb Foundation 5, but work in development

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.

Why is jQuery trigger working in the console but not in this code?

So I have a Rails 4 application with the cocoon gem with 2 radio buttons. If the user selects the Yes radio button, then the div#kites section is shown and the "Add kite" should be clicked. I know the code enters the if statement because when I select the Yes radio button, "hello kite" is shown in the console and the div#kites section is shown. Yet, the link is not clicked. I am able to enter $("#kites > div.links > a").trigger("click") in the console and trigger the appropriate behavior. Any ideas on why it could be working in the console but no in the code?
Coffeescript code:
$("input[name=led_to_kite]").change ->
if($("#led_to_kite_Yes").is(":checked"))
$("#kites").show()
$("#kites > div.links > a").trigger("click")
console.log "hello kite"
HTML markup
<ul id='led_to_kite'>
<li>kites</li>
<li><input checked="checked" id="led_to_kite_Yes" name="led_to_kite" type="radio" value="Yes" /> Yes</li>
<li><input id="led_to_kite_No" name="led_to_kite" type="radio" value="No" /> No</li>
</ul>
<div id='kites'>
<table>
<thead>
<tr>
<th>Description of kite</th>
<th>Description of setting in which kite was implemented</th>
</tr>
</thead>
<tbody>
<tr>
<td>test kites</td>
<td></td>
</tr>
</tbody>
</table>
<div class='nested-fields'>
<div class='outcome add-outcome-form'>
</div>
</div>
<input id="person_kites_attributes_0_id" name="person[kites_attributes][0][id]" type="hidden" value="10" />
<div class='links'>
<a class="add_fields" data-association-insertion-template="<div class='nested-fields'>
<div class='outcome add-outcome-form'>
<fieldset class="inputs"><ol><li class="string input optional stringish" id="person_kites_attributes_new_kites_brief_description_input"><label class="label" for="person_kites_attributes_new_kites_brief_description">Description of kite</label><input id="person_kites_attributes_new_kites_brief_description" name="person[kites_attributes][new_kites][brief_description]" type="text" />
</li>
<li class="string input optional stringish" id="person_kites_attributes_new_kites_setting_description_input"><label class="label" for="person_kites_attributes_new_kites_setting_description">Description of setting in which kite was implemented</label><input id="person_kites_attributes_new_kites_setting_description" name="person[kites_attributes][new_kites][setting_description]" type="text" />
</li>
</ol></fieldset>
</div>
</div>
" data-association="kite" data-associations="kites" href="#">Add kite</a>
</div>
</div>
application.js in assets directory
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require cocoon
//= require jquery.iframe-transport
//= require jquery.fileupload
//= require jquery.fileupload-process
//= require jquery.fileupload-image
//= require jquery.fileupload-validate
//= require jquery.are-you-sure
//= require ays-beforeunload-shim
//= require communication_dropdown
//= require file_uploader
//= require radio_button_logic
//= require show_pilot_fund_buttons
//= require formtastic_datepicker
//= require jquery.stepy
//= require wizard_stepy
//= require progress_bar
//= require jquery.icheck
//= require icheck
//= require investigator_dropdown
//= require check_form
//= require chosen-jquery
Current Gemfile in Rails application:
source 'https://rubygems.org'
ruby "2.1.2"
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~>4.1.6'
# Use sqlite3 as the database for Active Record
# gem 'sqlite3'
gem 'pg', '~> 0.17.1'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.4'
# 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'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-ui-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
# gem 'turbolinks'
# 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
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
# gem 'spring', group: :development
gem 'annotate', '~> 2.6.5'
gem 'figaro'
#ref: "9bbc7343f3916e73c185d071608e5ef24e9638d0"
gem 'dropbox-sdk', '~> 1.6.4'
gem 'bootstrap-sass', '~> 3.2.0.2'
gem "haml-rails"
gem 'devise'
gem 'formtastic', '~>3.0.0rc'
gem 'autoprefixer-rails'
gem "cocoon"
gem "mandrill-api"
gem 'resque', '~> 1.25.2'
gem 'tzinfo-data'
gem 'pundit'
gem 'ruby-progressbar'
gem 'jquery-ui-themes'
gem 'smarter_csv'
gem 'foreman'
gem 'unicorn', '~> 4.8.3'
gem 'aws-sdk'
gem 'paperclip'
gem 'obfuscate_id', :git => 'https://github.com/namick/obfuscate_id.git'
gem 'chosen-rails'
group :development do
gem 'sextant'
end
group :development, :test do
gem 'spring-commands-rspec'
gem 'rspec-rails'
gem 'guard-rspec'
gem 'pry'
end
group :test do
gem "factory_girl_rails"
gem "capybara"
gem "database_cleaner"
gem "launchy"
gem "poltergeist", "~> 1.5.0"
gem "codeclimate-test-reporter", require: nil
gem 'shoulda-matchers', require: false
gem 'vcr', '~> 2.9.2'
gem 'webmock', '~> 1.18.0'
end
group :staging, :production do
gem 'rails_12factor'
end

Javascript loading in Rails

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.

Turbolinks causing a "jquery-ujs has already been loaded!" error

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.