[SOLVED] Bootstrap dropdown not toggling when clicked

help
1

Hi everyone,

So I just took a dropdown code from the bootstrap site to put it in my navbar. At the end, I want to have some links to my pages in those dropdowns.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="{{pathFor route='Home'}}">Inventaire IT</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="{{pathFor route='Home'}}">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Objets
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Appareils</a>
                <a class="dropdown-item" href="#">Consommables</a>
              </div>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Propriétés
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Modèles</a>
                <a class="dropdown-item" href="#">Marques</a>
                <a class="dropdown-item" href="#">Fournisseurs</a>
                <a class="dropdown-item" href="#">Types de machine</a>
                <a class="dropdown-item" href="#">Locaux</a>
                <a class="dropdown-item" href="#">Lieux</a>
                <a class="dropdown-item" href="#">Villes</a>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Rechercher" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Rechercher</button>
          </form>
        </div>
      </nav>

Note that my bootstrap css works, just not for the dropdowns toggling.

After some research, I added an helper to handle the click event

Template.navBarTemplate.events({
    'click .dropdown-toggle': function (e) {
        e.preventDefault();
        $(e.target).find('.dropdown-menu').toggle();
        }
});

This doesn’t do the trick.

I installed bootstrap and his dependencies with npm like this :
meteor npm install jquery popper.js bootstrap
And then imported it in my main.js :
import 'bootstrap/dist/css/bootstrap.min.css';

Here are the packages versions from package.json :

"bootstrap": "^4.1.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.3",

Any idea to get this working ?

2

javascript files in npm modules are not automatically sent to the client, so you will need to tell meteor that you want it.

The easiest way is to import the js bundle in your client entry point:

import 'bootstrap/dist/js/bootstrap.bundle';

I personally prefer to add the import statement at the top of component js files for every component that depends on bootstrap (makes it easy to delete without needing to think about dependencies coming from elsewhere. After deleting last component depending on bootstrap, it will no longer be sent to the client, etc.)

2 Likes
3

Works like a charm ! Thank you sir.

1 Like
4

I just spent hours trying to solve this problem of non-working dropdown togglers.
I inserted this import statement in my navbar template, and it solved the problem.

1 Like