fix live toast demo (#37590)

* fix live toast demo

* Fix live toast demo

* Update snippets.js

* Update toasts.md

* Update snippets.js

* Code review comments addressed

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>

diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index a69b4bf646954107e35d8e1be9ab3453e3520ffa..95fce2da85116d0780baf469cf92c527a1d27df9 100644 (file)
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -19,7 +19,7 @@
   // --------
   // Tooltips
   // --------
-  // Instantiate all tooltips in a docs or StackBlitz page
+  // Instantiate all tooltips in a docs or StackBlitz
   document.querySelectorAll('[data-bs-toggle="tooltip"]')
     .forEach(tooltip => {
       new bootstrap.Tooltip(tooltip)
@@ -28,7 +28,7 @@
   // --------
   // Popovers
   // --------
-  // Instantiate all popovers in a docs or StackBlitz page
+  // Instantiate all popovers in docs or StackBlitz
   document.querySelectorAll('[data-bs-toggle="popover"]')
     .forEach(popover => {
       new bootstrap.Popover(popover)
@@ -49,7 +49,7 @@
     })
   }
 
-  // Instantiate all toasts in a docs page only
+  // Instantiate all toasts in docs pages only
   document.querySelectorAll('.bd-example .toast')
     .forEach(toastNode => {
       const toast = new bootstrap.Toast(toastNode, {
@@ -59,14 +59,14 @@
       toast.show()
     })
 
-  // Instantiate all toasts in a docs page only
+  // Instantiate all toasts in docs pages only
   const toastTrigger = document.getElementById('liveToastBtn')
   const toastLiveExample = document.getElementById('liveToast')
+
   if (toastTrigger) {
+    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
     toastTrigger.addEventListener('click', () => {
-      const toast = new bootstrap.Toast(toastLiveExample)
-
-      toast.show()
+      toastBootstrap.show()
     })
   }
 
@@ -98,7 +98,7 @@
   // --------
   // Carousels
   // --------
-  // Instantiate all non-autoplaying carousels in a docs or StackBlitz page
+  // Instantiate all non-autoplaying carousels in docs or StackBlitz
   document.querySelectorAll('.carousel:not([data-bs-ride="carousel"])')
     .forEach(carousel => {
       bootstrap.Carousel.getOrCreateInstance(carousel)

diff --git a/site/content/docs/5.3/components/toasts.md b/site/content/docs/5.3/components/toasts.md
index b7a84dc6ea2cb258fa229e5157c846457dd700d8..d3454633a31cd337cb814d2669c2a2d9379e2365 100644 (file)
--- a/site/content/docs/5.3/components/toasts.md
+++ b/site/content/docs/5.3/components/toasts.md
@@ -90,11 +90,11 @@ We use the following JavaScript to trigger our live toast demo:
 ```js
 const toastTrigger = document.getElementById('liveToastBtn')
 const toastLiveExample = document.getElementById('liveToast')
+
 if (toastTrigger) {
+  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
   toastTrigger.addEventListener('click', () => {
-    const toast = new bootstrap.Toast(toastLiveExample)
-
-    toast.show()
+    toastBootstrap.show()
   })
 }
 ```