Search code examples
javascripthtmldombootstrap-5toast

In Bootstrap 5 can I connect a button to show a toast just via HTML?

I have a Bootstrap page with a button and a toast (taken from the Bootstrap doco). According to that doco I have to initialise the toast in JavaScript. So I do this on page load.

Now I want the button to show the toast when I click it. Can I do this just with HTML or do I need to wire button and toast per hand via some JS event?

The way I read the doco everything should be set up after the intialisation. However, when I click the button nothing happens. How does Bootstrap connect button and toast?

Here my page (heavily borrowed from this SO answer):

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  </head>

  <body>

    <div class="container mt-5">
        <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</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">
              <strong class="me-auto">Bootstrap</strong>
              <small>11 mins ago</small>
              <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
                <span>&times;</span>
              </button>
            </div>
            <div class="toast-body">
              Hello, world! This is a toast message.
            </div>
          </div>
        </div>

    </div>


    <!-- Popper.js first, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
    <script>
      let toastEl = document.querySelector('.toast');
      let toast = new bootstrap.Toast(toastEl, { autohide: false })
      //toast.show()
   
    </script>
  </body>

</html>
Solution

  • There's no existing way already mapped at bootstrap.min.js, like "data-target" for show up modals.

    As you can see at official doc you attach,

    They specific say:

    • "You have to manually call this method, instead your toast won’t show."

    Example (https://getbootstrap.com/docs/5.0/components/toasts/#getinstance):

    • To make control over 'show' grap with any eventListener, and then execute the show with the instance collected.
            var myToastEl = document.getElementById('myToastEl');
        // Returns a Bootstrap toast instance
        var myToast = bootstrap.Toast.getInstance(myToastEl);
        // Execute when you want to display the Toast:
        myToast.show();