Can't get Bootstrap toast to close or autohide to work-CodePudding

I am trying to implement Bootstrap 5 toasts in my ASP.NET web application, using the following code...

HTML

                    <div >
                        <div  id="companyUpdOK" name="companyUpdOK" role="alert" data-delay="5000" data-autohide="true" aria-live="assertive" aria-atomic="true">
                            <div >
                                <strong >Bootstrap</strong>
                                <small>11 mins ago</small>
                                <button type="button"  data-bs-dismiss="toast" aria-label="Close"></button>
                            </div>
                            <div >
                                Hello, world! This is a toast message.
                            </div>
                        </div>
                    </div>

JavaScript

$('#companyUpdOK').toast();  // code to set up toast
...
$('#companyUpdOK').show();   // and later, the code to display the toast

So, the toast shows up, but the autohide doesn't work, and the close button doesn't work either. I have tried every combination I could find, including setting the options when initializing the toast, as in:

$('#companyUpdOK').toast({delay: 5000, autohide: true});

None of these work. What am I doing wrong?

CodePudding user response：

if you are using bootstrap 5 then you should use data-bs-autohide="true" and data-bs-delay="10000" you missed bs

CodePudding user response：

Your code works with some changes

Bootstrap 5 doesn't require jQuery and the native JavaScript library is very easy to use. Yet, if you do use jQuery then keep in mind that the documentation may not show you the right way to do something using jQuery.

Here are a few issues to watch for:

1. Initialization

When Bootstrap 5 detects jQuery it loads jQuery plug-ins on the DOMContentLoaded event. Importantly, this appears to happen AFTER the jQuery ready event. If you need to do something with Bootstrap when the page loads then add a handler like:

document.addEventListener("DOMContentReady", function() {

   $("#mytoast").toast();

});

2. jQuery plug-ins

The plug-ins that Bootstrap adds to jQuery are just wrappers for Bootstrap native JavaScript methods. The syntax is different and looking at the documentation can mislead you about how to do it with jQuery.

For example, the native JavaScript way of showing a Toast:

let toast = bootstrap.Toast.getOrCreateInstance(myToastEl);
toast.show();

Yet, if you are using jQuery this will not work, even though it might seem so from the documentation.

let toast = $(myToastEl).toast();
toast.show();

With jQuery you instead need to do this:

$(myToastEl).toast("show");

3. Data Attributes

Be aware that attributes have a new prefix: data-bs-<name> So if you use data-delay rather than the correct data-bs-delay then it will not work correctly.

Demo Snippet

The snippet incorporates these changes into the original code and the Bootstrap toast displays as expected.

test.onclick = function() {
  $('#companyUpdOK').toast("show");
}

document.addEventListener("DOMContentLoaded", function() {
  $('#companyUpdOK').toast();
});

<button id="test" >Show Toast</button>


<div aria-live="polite" aria-atomic="true" >
  <div  id="toastPlacement">

    <div  id="companyUpdOK" name="companyUpdOK" role="alert" data-bs-delay="2000" data-bs-autohide="true" aria-live="assertive" aria-atomic="true">
      <div >
        <strong >Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button"  data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div >
        Hello, world! This is a toast message.
      </div>
    </div>

  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.js"></script>