Topic: When to use Alert appendToBody

PerfectCamp priority asked 1 year ago


Can you give me some examples of when to use the appendToBody option? In particular when using the Alerts API. If the DOM element is already in the body why is there an option to move it to the end of the body?

Second question is do we need to have a DOM element just to display an alert? Is there no way of just using javascript to display an alert like mdb.Alert.show('some alert text', options); and have MDB create the DOM element on the fly and remove the element from the DOM after the delay? Why would we need to first create and insert a DOM element then create an instance then call the show() method then manually remove it from the DOM??? I think I'm missing the obvious. I'm very new to MDB and Bootstrap so go easy on me.

Here is what I'm doing currently but it seems to be a lot of overhead just to display a simple phrase.

var alert = '<div id="addFavoriteSuccess" class="alert fade" data-mdb-color="success" data-mdb-position="top-left" data-mdb-autohide="true" data-mdb-delay="2000" data-mdb-hidden="true" role="alert"><i class="fas fa-check-circle me-3"></i>' + response.message + '</div>';
$('main').append(alert);
mdb.Alert.getOrCreateInstance(document.getElementById('addFavoriteSuccess')).show();
setTimeout(function() {
     $('#addFavoriteSuccess').remove();
}, 3000);

Thanks!


Grzegorz Bujański staff answered 1 year ago


How alerts work in MDB depends on how alerts work in Bootstrap. We use the same solution and added our own options.

Bootstrap leaves the alert element in the DOM by default, and it is added by default in the same place where the user adds it to the page. However, at the request of our users, we added the appendToBody option. Some users wanted the alert element to always be moved to the end of the page body to tidy up the DOM structure.

Currently on our todo list we have a taks to add the option to create alerts using JS. We are considering adding this option.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.0
  • Device: PC
  • Browser: Chrome
  • OS: Win 11
  • Provided sample code: No
  • Provided link: No