Topic: Can't reinitialise components after content change (e.g. ajax call)
VDLP priority asked 4 months ago
We are upgrading to MDB v7.2.0, but we encounter some issues. We have a tab where we populate the content from an ajax call. In the response of this ajax call there is a new select input, but it doesn't get initialised by MDB.
We've added the data-mdb-select-init
attribute to this select and this select does work if we put it outside the ajax response (so in the initial load).
We are calling the initMdb
method with all the used components after every ajax content update, but it looks like it doesn't initialise new elements/components. While looking in the source code I found this piece of code, where it looks like every component can only be initialised once.
const initComponent = (component, manualInit = false) => {
if (!component || InitializedComponents.get(component.NAME)) {
return;
}
InitializedComponents.set(component.NAME);
For an extra check I added a console log before the initMDB call for the select, and this function logs my new select (and the other existing selects):
console.log(document.documentElement.querySelectorAll('[data-mdb-select-init]'));
Expected behavior
When I call the initMDB
method with the used components, it should initialize newly created html elements in the DOM. We have the same issue for multiple components.
Actual behavior
The initMDB
method only initialises components once.
Kamila Pieńkowska staff answered 4 months ago
If you add content after page is loaded you need to initialize it manually with JS.
Every component have code needed to do that in API usage section: https://mdbootstrap.com/docs/standard/forms/select/#api-section-usage
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.2.0
- Device: n/a
- Browser: n/a
- OS: n/a
- Provided sample code: Yes
- Provided link: No