Boostrap JS - Not working in rails 7 with jsbundler-CodePudding

I ran the create using the jsbundler and cssbundler, it installed the appropiate files.

$ rails new app -j esbuild --css bootstrap

I created a navbar from the bootstrap doc on a partial and rendered on the application.html.erb

but when I run

$ ./bin/dev

on the navbar when I click on the dropdown or the hamburger button nothing happens

<!--./app/views/shared/_navbar.html.erb-->
<nav >
  <div >
    <a  href="#">Navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul  aria-labelledby="navbarDropdown">
            <li><a  href="#">Action</a></li>
            <li><a  href="#">Another action</a></li>
            <li><hr ></li>
            <li><a  href="#">Something else here</a></li>
          </ul>
        </li>
        <li >
          <a >Disabled</a>
        </li>
      </ul>
      <form  role="search">
        <input  type="search" placeholder="Search" aria-label="Search">
        <button  type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Also, I tryed importmap bootstrap but nothing seems to work.

CodePudding user response：

You need to import bootstrap js files in your application.js, like that:

import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

document.addEventListener("turbo:load", () => {
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
  })
})

Reference: https://github.com/gorails-screencasts/bootstrap-css-bundling

CodePudding user response：

Have you checked if the required bootstrap bundle js file is properly loaded?

Instead of using the asset pipeline why don't you add the required CSS and JS CDN links of bootstrap under the head tags in the application.html.erb file. I used this in my internship project and it works really well.