Question 50272 in Javascript Question posted in
A very good W3school tutorial can be found here.

Bootstrap toast alert: bootstrap not defined – Javascript

I’m using Bootstrap 5.3 right out of the box to create a toast message. The console says that within this code:

const toastTrigger = document.getElementById('buynow')
const toastLiveExample = document.getElementById('liveToast')

if (true) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.show()
  });
};

that bootstrap is not defined. I’m stumped. I don’t know of anything I can tweak to fix this error.

  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
  crossorigin="anonymous"></script>
  <script src="app.js"></script>
  <script src="https://kit.fontawesome.com/b20ad3118a.js" crossorigin="anonymous"></script>
</body>

</html>
Tags:

2

Answers


  1. 0

    Did you import ‘bootstrap’ into your component?

    9 times out of 10 when there is an undefined error it’s because something wasn’t properly imported (or required) in a component or script.

    Login or Signup to reply.
  2. 0

    This code has no issues if you import the library correctly.

    const toastTrigger = document.getElementById('buynow')
const toastLiveExample = document.getElementById('liveToast')

if (true) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.show()
  });
};
    <html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" />
</head>
<body>
  
  <button type="button" class="btn btn-primary" id="buynow">Buy Now</button>

  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
  crossorigin="anonymous"></script>
  <script src="app.js"></script>
  <script src="https://kit.fontawesome.com/b20ad3118a.js" crossorigin="anonymous"></script>
</body>

</html>

    I suggest checking if the library success imported in Inspect Element > Network > JS and ensuring all status is 200. Make sure your internet/proxy doesn’t block the library.

    enter image description here

    I have checked your codes. There are a few problem can be solved:

    1. Move your app.js to the bottom of body because the browser loads components in ascending order from top to down, so .getElementById will be null if <script> at the top position of the targeted id.
    ...
  </footer>

  <script src="app.js"></script>

</body>

</html>
    1. Delete all .stretched-link classes from Buy Now button because this class blocking the click event of this button.
    ...
<a role="button"
   class="buy-now btn btn-outline-danger text-decoration-none fs-3 fw-bold px-4 py-2 rounded-5">
   Buy Now
</a>
...
    1. Change the implementation of toast calling like this:
    const toastTriggers=document.getElementsByClassName('buy-now');
const toastLiveExample=document.getElementById('liveToast');

[...toastTriggers].forEach((toastTrigger) => {
  if (toastTrigger) {
    const toastBootstrap=bootstrap.Toast.getOrCreateInstance(toastLiveExample);
    toastTrigger.addEventListener('click', () => {
      toastBootstrap.show()
    });
  };
})
    1. Remove this button element because it is no longer needed.
    <button id="buynow">Click</button>
    1. Add width: 30% at the logo of the toast to prevent a bigger size of it.
    ...
<img src="img/logo.png" class="rounded me-2" alt="Roots Reggae Music logo" style="width: 30%;">
...

    Continuation:

    1.) Scroll spy is acting weird. It’s putting the active class on the 1st and 4th li, seemingly at random

    To fix this, you need to put div.data-bs-target on <main> tag and close that tag on <footer> tag.

    ...
<!-- Main Content section -->
<div data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <main class="main" id="main-content">
  ...
  </section>
</div>
<!-- Footer section -->
<footer class="container-fluid">
...

    2.) Tooltips are not showing at all

    Simple, you can import popper.min.js library before bootstrap.min.js

    <!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="bootstrap-5.3.0-alpha3-dist/js/bootstrap.min.js"></script>
...

    That’s it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search