We Keep Coding

How do I do require in Rails 6.1? How do I require Bootstrap JavaScripts in rails 6 and higher?

I am trying to require these Bootstrap JavaScripts in my project using rails 6.
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
in Rails version 6 the application.js file has been moved inside packs.
in Oder versions, this would have been okay but in rails 6 I tried that it didn't work. My Bootstrap Javascript didn't work.
How do I do require Bootstrap JavaScripts in rails 6 and higher?
Please help me I am stuck I tried adding this it didn't work
here's my application.js file
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
import Rails from "#rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "#rails/activestorage"
import "channels"
import "bootstrap"
import "../stylesheets/application"
Rails.start()
Turbolinks.start()
ActiveStorage.start()
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels").start()
require("jquery").start()
require("bootstrap-sprockets").start()
require("jquery_ujs").start()
require("require_tree .").start()
Here is my gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '3.0.2'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.4'
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# 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.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false
# uSE TWITTER BOOTSTRAP LIBRARY FOR FRONT-END UI LAYOUT
gem 'bootstrap-sass', '3.3.7'
#Use Font Awesome sass gem for adding icons
gem 'font-awesome-sass', '4.6.2'
gem 'jquery-rails'
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
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 4.1.0'
# Display performance information such as SQL time and flame graphs for each request in your browser.
# Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
gem 'rack-mini-profiler', '~> 2.0'
end
group :production do
#Use the PostgreSQL gem for Heroku Production Servers
gem 'pg', '0.18.4'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 3.26'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Jasmine Rails, src_files not being loaded from subdirectory

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}"

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.