Topic: Using Alerts: "Bootstrap doesn't allow more than one instance per element. Bound instance: bs.alert."
Toast alert message with close button and auto-fade.
Expected behavior
The message shows, no javascript error
Actual behavior
The message shows, but also the javascript error: "Bootstrap doesn't allow more than one instance per element. Bound instance: bs.alert."
Resources (screenshots, code snippets etc.)
https://mdbootstrap.com/snippets/standard/softcon/3549493
It seems to only happen if using the auto-fade out system.
Hi,
Autohide didn't work because the show class was used. It overwrote autohide behavior. You need to manually show toast with mdb.Toast.getInstance(document.getElementById('_er')).show();. Here is the snippet: https://mdbootstrap.com/snippets/standard/d-wajszczuk/3631410.
Keep coding,
Dawid
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.1
- Device: PC
- Browser: All
- OS: Windows
- Provided sample code: No
- Provided link: Yes
Dawid Wajszczuk staff commented 3 years ago
Hi. Why are using
alertandtoastclass on the same element? If you use only one of them, there will be no error. You are basically initializing two components on the same element.softcon pro premium commented 3 years ago
Because if you remove "alert" from the class, it will not fade out after the desired number of seconds, unless you roll over and then roll out of the area again. It seems to stay there until it is interacted with.
softcon pro premium commented 3 years ago
On further reseach, when I remove the suggested class name that error goes away but the auto-fade does not occur. I have managed to sometimes fix it by faking a "mouseout" event on the element on page load. But that solution doesn't always seem to work. Update in the provided snippet. If you remove the javascript you will see the auto-fade does not trigger unless the user scrolls over the alert with mouse.