Using bootstrap javascript in a Rails 7 app

Question

I have a working Rails 7 app that uses esbuild as the JS bundler and have imported bootstrap.

I am trying to figure out how to a access any Bootstrap Javascript functionality 'outside' the main application.js file - i.e. let's say I wanted to programatically show a Bootstrap modal on a particular page like this:

var myModal = new bootstrap.Modal(document.getElementById('helpModal'), {});
myModal.modal('show');

however this doesn't work as 'bootstrap' is not known:

Uncaught ReferenceError: bootstrap is not defined

...even though the page links in application.js:

<%= javascript_include_tag "application", defer: true %>

Any suggestions on how to access 'bootstrap' in JS outside application.js itself ?

Thank you !

blnc · Accepted Answer · 2022-02-17 22:41:01Z

1

Assuming you created your rails app with:

rails new APP_NAME --css=bootstrap ...

Which creates your app with ESBUILD and leaves you with a app/javascripts/application.js file looking like this:

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

You now need to code in the modal to use the imported bootstrap.

Add the code you have in your question below the bootstrap import line:

// Modals
var myModal = new bootstrap.Modal(document.getElementById('helpModal'), {});
myModal.modal('show');

// Or to have it triggered using a button
document.getElementById('helpModalButton').addEventListener('click', event => {
  myModal.show();
});

This will turn on the event handlers

More can be found on the Bootstrap Docs page for each of the Components (the same applies to Modals and Popovers)

https://getbootstrap.com/docs/5.1/components/modal/#passing-options

answered Feb 17, 2022 at 22:41

blnc

4,4141 gold badge30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alberto T. Over a year ago

This of course works, but the question asks "how to access any Bootstrap Javascript functionality 'outside' the main application.js file". I have a similar problem: an "import library" after the "import bootstrap" where I get an "bootstrap is not defined" inside that imported library.

Mark Swardstrom · Accepted Answer · 2024-05-20 16:40:44Z

1

I got this to work by setting bootstrap on window in application.js

// app/javascript/application.js
import * as bootstrap from "bootstrap"
window.bootstrap = bootstrap;

// In the view
:javascript
  new window.bootstrap.Modal('#helpModal').show();

To close the modal on "Close" and "Submit" this worked well:

<button type="button" class="btn btn-secondary" 'data-bs-dismiss'="modal">Close</button>

<%= form.submit "Submit", class: "btn btn-primary", 'data-bs-dismiss': "modal" %>

Adding "data-bs-dismiss" to the submit button closes it on submit.

edited May 20, 2024 at 16:40

answered May 20, 2024 at 2:05

Mark Swardstrom

18.3k6 gold badges74 silver badges75 bronze badges

Comments

Matthew · Accepted Answer · 2024-01-10 05:28:04Z

I'm not sure how to help fix that error in an imported library but to reference bootstrap from a JS file within my app (but outside application.js) I duplicated the import * as bootstrap from "bootstrap" command in my Javascript file...

//app/javascript/popovers.js

console.log('Loading popovers...')

import * as bootstrap from "bootstrap"

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Then I imported that file from my main application.js:

//app/javascript/application.js

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
import "./popovers.js"

For me, I was trying to reference bootstrap so I could initialise Popovers.

Fadel ellah ERRAMI · Accepted Answer · 2024-01-20 21:58:23Z

0

I just removed Gemfile.lock in my project and updated the gems using the command gem update --system.finally insatll gems using bundler bundle install I hope that works for you.

edited Jan 20, 2024 at 21:58

answered Jan 20, 2024 at 21:56

Fadel ellah ERRAMI

193 bronze badges

Collectives™ on Stack Overflow

Using bootstrap javascript in a Rails 7 app

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related