3

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 inassets/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?

Liz
  • 1,369
  • 2
  • 26
  • 61
  • Out of curiosity, did you manage to get the application generated from the command line using the css=bootstrap option? It's failing for me – EastsideDev Feb 25 '22 at 11:13

3 Answers3

10

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>
bweathers
  • 126
  • 1
  • 6
  • 3
    This worked, so I'm definitely accepting the answer, but I'd love to know how to get the intended asset pipeline working. Rails 7 is such a ball of confusing! – Liz Feb 02 '22 at 23:36
  • Did you ever configure the project to work without the cdn tag? – smilingfrog Oct 04 '22 at 22:35
3

I had some major problems with this. To fix, go into app/javascript/application.js and change this

import "@hotwired/turbo-rails"

to this

import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false

Also, always use bin/dev to start the rails server in development, rather than the rails server command.

Further info

  • See here for more info
stevec
  • 41,291
  • 27
  • 223
  • 311
  • 1
    Thanks for this, I also had major issues with Bootstrap. I will read up on Turbo to know what's what. – Ben Aug 02 '22 at 11:06
  • 1
    @Ben it was tough to fix for me too. Figuring out what worked took three full days of hard debugging. If you learn things that help improve one’s understanding or tips/tricks please feel free to drop the link here as it may help others. – stevec Aug 02 '22 at 13:18
  • 1
    Starting the server with bin/dev fixed it for me. Thank you! – Jason Galvin May 02 '23 at 04:05
  • Thanks! This worked for me. Also seems to work fine with running 'rails server' (so far). – shoegazerpt Aug 18 '23 at 19:53
1

Check to make sure you have the right version of Bootstrap with the example Bootstrap code. Version 4 markup wont work with Version 5 Bootstrap.

Specifically this attribute changed from:

data: { toggle: "dropdown"}

to

data: { "bs-toggle" => "dropdown"}

If you're "Search" form is stacked and not 100% width, it's a sign you may have the wrong version

enter image description here

It should look like this:

enter image description here

This is the version 5.3 NavBar: https://getbootstrap.com/docs/5.3/components/navbar/

Mark Swardstrom
  • 17,217
  • 6
  • 62
  • 70