Bootstrap 5 Toasts dispose() Method
Last Updated :
17 Feb, 2023
Bootstrap 5 Toasts dispose() method stops a toast from being displayed on the webpage. In other words, it simply removes a toast and releases the resources associated with it. However, the disposed of toast will not be removed from the DOM (Document Object Model).
Syntax:
toast_object.dispose();
The dispose() method doesn’t take any parameters and returns nothing. Hence, this method has the return type ‘void’.
Example 1: In this example, we will create a toast element and two buttons – one to show the toast and one to dispose of it. We will use one of the created buttons to call the dispose() method. When a user clicks the ‘click to display toast ! ‘ button, a toast with a greeting message appears at the bottom right corner of the web page. This toast doesn’t disappear automatically since we have set the value of ‘autohide’ option to ‘false’. When the user clicks the ‘click to dispose toast !’ button, the toast dispose() method is called and the toast disappears from the webpage. However, it remains in the DOM.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
rel="stylesheet"
integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
<script src=
integrity=
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Bootstrap 5 Toasts dispose() Method
</h3>
<button type="button"
class="btn btn-success"
onclick="displayToast()">
Click to display toast !
</button>
<br>
<button type="button"
class="btn btn-danger"
onclick="disposeToast()">
Click to dispose toast !
</button>
<div class="toast-container position-fixed ">
<div id="gfgToast"
class="toast"
role="alert"
aria-live="assertive"
aria-atomic="true">
<div class="toast-header">
<img src=
class="rounded me-2"
alt="gfg_logo">
<strong class="me-auto">
GFG
</strong>
<button type="button"
class="btn-close"
data-bs-dismiss="toast"
aria-label="Close">
</button>
</div>
<div class="toast-body">
welcome to GeeksforGeeks!
</div>
</div>
</div>
<script>
function displayToast() {
var toastElement = document.getElementById("gfgToast");
var toast =
new bootstrap.Toast(toastElement, { autohide: false });
toast.show();
}
function disposeToast() {
var toastElement = document.getElementById("gfgToast");
var toast = new bootstrap.Toast(
toastElement, { autohide: false });
toast.dispose();
}
</script>
</body>
</html>
|
Output:
example 1 output
Example 2: In this example, we are going to set a timer to call the toast dispose() method. Thus, user interaction like a button onclick event is not required to trigger the dispose() method. When the user clicks the ‘Click to display toast!’ button, the displayToast() javascript function is called. This function triggers the toast show() method and displays the toast on the page. The method setInterval() is used to trigger the toast dispose() method after 3000 milliseconds which is equal to 3 seconds, right after the toast is displayed. Thus the displayed toast disappears from the page right after 3 seconds, automatically.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Bootstrap 5 Toasts dispose() Method</title>
<link href=
rel="stylesheet"
integrity=
"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
<script src=
integrity=
"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous">
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Bootstrap 5 Toasts dispose() Method
</h3>
<button type="button"
class="btn btn-success"
onclick="displayToast()">
Click to display toast !
</button>
<br>
<div class="toast-container position-fixed ">
<div id="gfgToast"
class="toast"
role="alert"
aria-live="assertive"
aria-atomic="true">
<div class="toast-header">
<img src=
class="rounded me-2"
alt="gfg_img">
<strong class="me-auto">
GFG
</strong>
<button type="button"
class="btn-close"
data-bs-dismiss="toast"
aria-label="Close">
</button>
</div>
<div class="toast-body">
welcome to GeeksforGeeks!
</div>
</div>
</div>
<script>
function displayToast() {
var toastElement = document.getElementById("gfgToast");
var toast =
new bootstrap.Toast(toastElement, { autohide: false });
toast.show();
}
// Dispose the toast after 3 seconds
setInterval(function () {
var toastElement = document.getElementById("gfgToast");
var toast =
new bootstrap.Toast(toastElement, { autohide: false });
toast.dispose();
}, 3000);
</script>
</body>
</html>
|
Output:
example2 output
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#dispose
Share your thoughts in the comments
Please Login to comment...