2

Bootstrap 5 Toasts Events

 1 month ago
source link: https://www.geeksforgeeks.org/bootstrap-5-toasts-events/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Bootstrap 5 Toasts Events

Last Updated : 15 Dec, 2022

Bootstrap5 Toasts Events are events that take place when the toast triggers a specific instance method. These are used to perform some tasks when these instances are triggered.

Toasts Events:

  • show.bs.toast: This event is called when show instance method of toast is called.
  • shown.bs.toast: This event is called when toast is shown to the user.
  • hide.bs.toast: This event is called when the toast hide instance is evoked.
  • hidden.bs.toast: This event is called when toast closing is finished.

Syntax:

var myToastEl = document.getElementById('#id')
myToastEl.addEventListener($EVENT, function () {
    ...
})

The $EVENT can be replaced by any of the above-mentioned events.

Example 1: In this example, we will learn about shown.bs.toast. It will trigger after the toast is shown.

<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center col-8">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap 5 Toasts Events
</h2>
<div class="container text-center">
<button type="button" 
class="btn btn-primary" 
id="success" 
onClick="showToast()">
Show
</button>
<div class="toast text-white bg-primary" 
id="GFG">
<div class="toast-header">
<img src=
class="img-thumbnail rounded me-2" 
width="40px" 
alt="GFG Logo">
<strong class="me-auto">
Toast Events
</strong>
<button type="button" 
class="btn-close" 
data-bs-dismiss="toast">
</button>
</div>
<div class="toast-body">
<p>
Welcome to GeeksforGeeks
</p>
</div>
</div>
</div>
</div>
<script>
function showToast() {
var toastElList =
[].slice.call(document.querySelectorAll('.toast'));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
var myToastEl = document.getElementById('GFG')
myToastEl.addEventListener('shown.bs.toast', function () {
alert("Shown bs Toast called")
})
}
</script>
</body>
</html>

Output:

Recording20221203at003322.gif

Example 2: In this example, we will learn about hidden.bs.toast which is triggered when the toast is hidden.

<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"  
crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container text-center col-8">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>
Bootstrap 5 Toasts Events
</h2>
<div class="container text-center">
<button type="button" 
class="btn btn-primary" 
id="success" 
onClick="showToast()">
Show
</button>
<div class="toast text-white bg-primary" 
id="GFG">
<div class="toast-header">
<img src=
class="img-thumbnail rounded me-2" 
width="40px" 
alt="GFG Logo">
<strong class="me-auto">
Toast Success
</strong>
<button type="button" 
class="btn-close" 
data-bs-dismiss="toast">
</button>
</div>
<div class="toast-body">
<p>
Welcome to GeeksforGeeks
</p>
</div>
</div>
</div>
</div>
<script>
function showToast() {
var toastElList =
[].slice.call(document.querySelectorAll('.toast'));
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
var myToastEl = document.getElementById('GFG')
myToastEl.addEventListener('hidden.bs.toast', function () {
alert("Hidden bs Toast called")
})
}
</script>
</body>
</html>

Output:

Recording20221203at003136.gif

Reference: https://getbootstrap.com/docs/5.0/components/toasts/#events

Here's a complete roadmap for you to become a developer: Learn DSA -> Master Frontend/Backend/Full Stack -> Build Projects -> Keep Applying to Jobs
And why go anywhere else when our DSA to Development: Coding Guide helps you do this in a single program! Apply now to our DSA to Development Program and our counsellors will connect with you for further guidance & support.

Like Article
Suggest improvement
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK