Using bootstrap javascript in a Rails 7 app

user_393545 0
Viewed 659

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 !

esbuild ruby-on-rails-7 bootstrap-5 javascript
1 Answers

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

user_7372750
Related