Hello guys i have problem with second toast which is not displaying.
HTML:
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<!-- FIRST -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="fas fa-duck"></i>
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<!-- SECOND -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="fas fa-duck"></i>
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
</div>
Script looks like
<script>
window.onload = (event)=> {
let myAlert = document.querySelector('.toast');
let bsAlert = new bootstrap.Toast(myAlert);
bsAlert.show();
}
</script>
My question is how can i fix it to display second toast on my site
show() only works for one element , you have to make a loop for all your toasts if you want to show them in one event:
$.each($('.toast'),function(i,item){ new bootstrap.Toast(item).show();});
I just created a class named start-toast for all of the messages that will be displayed when the page is ready, and then applied the toast() method with the parameter 'show', to all of the messages with that custom class . According to the documentation, you should be able to also stack them up with the toast-container class.
$(document).ready(function(){
$(".start-toast").toast('show');
});
<!-- JQuery - to handle with with the DOM easier !-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rel="stylesheet">
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
<script crossorigin="anonymous"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="position-fixed bottom-0 end-0 " style="z-index: 11">
<div aria-atomic="true" aria-live="assertive" class="toast hide start-toast" id="welcomeToast" role="alert">
<div class="toast-header">
<strong>🙂</strong>
<strong class="me-auto">Welcome!!</strong>
<small>0 min ago</small>
<button aria-label="Close" class="btn-close" data-bs-dismiss="toast" type="button"></button>
</div>
<div class="toast-body">
How are you doing ?
</div>
</div>
</div>