I’m trying to set up my first Rails 7 app and have installed Bootstrap 5 properly (you can see by the CSS) and gotten rid of all the error messages, but the javascript functions (i.e. dropdown menus, offcanvas, etc.) aren’t working.
I have tested it with this code:
<script> $( document ).ready(function() { console.log( "document ready!" ); $( "#TEST" ).click(function() { console.log( "clicked!" ); }); }); </script>
And both console.log statments produce the correct result, leading me to believe js and jquery are working properly and it is something with bootstrap.
Here’s my gemfile:
source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '3.1.0' # RAILS GENERATED STUFF gem 'rails', '~> 7.0.1' gem 'pg', '~> 1.1' gem 'puma', '~> 5.0' gem 'sass-rails', '>= 6' # gem 'webpacker', '~> 5.0' gem 'jsbundling-rails' gem 'jbuilder', '~> 2.7' gem 'bootsnap', '>= 1.4.4', require: false gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] # OTHER NECESSARY STUFF gem 'jquery-rails' gem 'jquery-ui-rails' gem 'sprockets-rails' gem 'bcrypt', '~> 3.1.7' gem 'gon' # ESSENTIALS gem 'devise' gem 'simple_form' gem 'font_awesome5_rails' gem 'friendly_id', '~> 5.2.0' gem 'tinymce-rails' gem 'invisible_captcha' gem 'figaro' gem 'high_voltage', '~> 3.1' gem 'bootstrap', '~> 5.1', '>= 5.1.3' # FOR IMAGES gem 'mini_magick' gem 'aws-sdk' , '~> 3' gem 'aws-sdk-s3', require: false group :development, :test do gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] gem 'pry-rails' gem 'better_errors' end group :development do gem 'web-console', '>= 4.1.0' gem 'rack-mini-profiler', '~> 2.0' gem 'listen', '~> 3.3' gem 'spring' end group :test do gem 'capybara', '>= 3.26' gem 'selenium-webdriver' gem 'webdrivers' end
Here’s my application.js
, which lives in ‘javascript/controllers/application.js but somehow also in
assets/builds/application.js. I'm not using webpack, rather rollup installed with
$ ./bin/rails javascript:install:rollup`:
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails import "controllers" import 'offcanvas'; //= require jquery3 //= require jquery_ujs //= require jquery-ui //= require popper //= require bootstrap //= require activestorage //= require font_awesome5 //= require tinymce window.jQuery = $; window.$ = $;
Can anyone see where I’m going wrong?
Advertisement
Answer
I had the same problem.
I got things working by adding the bundle script from Bootstrap in the between the body tags of the application.html.erb file:
<body> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <%= yield %> </body>