Topic: Reapply data attributes after loading new DOM conten
Hi all,
I am loading new content into the DOM asynchronously. Some elements have tooltips attached via data attributes. How can I tell MDB to “re-initialize” after the ajax call so that the tooltips work with the newly loaded content?
I suppose, this is super simple, but after looking through the documentation for an hour, I still cannot find out how it is done.
Thank you for your help!
Best, Fabian
Hi again,
I found a solution, not sure if it is a good one.
First of all, I declared my in-line JavaScript as a module (< script type="module" >) so that I was allowed to “import { Tooltip } from 'mdb-ui-kit';”. Again, I am sorry for my dump questions, I just learned about how modules work for the first time today.
Afterwards I am just destroying all Tooltip objects before updating the DOM and generating new objects after the DOM update:
document.querySelectorAll('.has-tooltip').forEach(function(element, index) {
Tooltip.getInstance(element).dispose();
});
document.getElementById('scrollable-content').innerHTML += json['html'];
document.querySelectorAll('.has-tooltip').forEach(function(element, index) {
new Tooltip(element);
});
Not super elegant, but it works 😉
Best, Fabian
Kamila Pieńkowska staff commented 6 months ago
You do not need to import Tooltip it is needed in case you use es modules. I suspect you don't.
So your solution is mostly good. You only need to change Tooltip with mdb.Tooltip
Hi Kamila,
Thank you for answering.
I am really sorry about my dump questions, I am not really good in JavaScript. I had already tried to call
initMDB({ Tooltip });
again from the function that is updating the DOM after I fetch additional data asynchronously. However, this just results in
Uncaught (in promise) ReferenceError: initMDB is not defined
I always struggle with visibility in JavaScript. How can I access a MDB object and trigger a refresh?
Thank you very much!
Fabian
Components are initiated on the page load. If you add after that you need to perform manual JS init. Every component have Usage section in API tab. You can find there syntax needed for JS init.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 7.2.0
- Device: any
- Browser: any
- OS: any
- Provided sample code: No
- Provided link: No