Topic: Reapply data attributes after loading new DOM conten

noopNetwork free asked 1 month ago


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


noopNetwork free answered 1 month ago


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 1 month 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


noopNetwork free answered 1 month ago


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


Kamila Pieńkowska staff answered 1 month ago


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.



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: 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