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

softcon premium asked 11 months 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.)

https://mdbootstrap.com/snippets/standard/softcon/3549493

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


Dawid Wajszczuk staff commented 11 months 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 10 months 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 10 months 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 10 months ago


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


softcon premium commented 10 months ago

I understand, thanks. That works.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: 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
Tags