Topic: Using Alerts: "Bootstrap doesn't allow more than one instance per element. Bound instance: bs.alert."

softcon premium asked 2 years ago

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.)

It seems to only happen if using the auto-fade out system.

Dawid Wajszczuk staff commented 2 years ago

Hi. Why are using alert and toast class 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 premium commented 2 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 premium commented 2 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.

Dawid Wajszczuk staff answered 2 years ago


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:

Keep coding,

softcon premium commented 2 years ago

I understand, thanks. That works.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • 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