How to handle initMDB when replacing a component with HTML f


Topic: How to handle initMDB when replacing a component with HTML for one of the same type?

ikan_nak pro premium priority asked 3 weeks ago

Suppose I have a part of a page that often gets loaded asynchronously through Javascript, where the asynchronously loaded part has a Bootstrap component that needs initialization. For example: the contents of a modal with save functionality usually has an Alert to show a success or failure message and probably one or more Selects or other form components that need to be initialized again after attempting a save. Because of the nature of these modals, the page DOM doesn't change when the modal gets updated, and any components on the page are put back exactly as they were before the modal update.

In a situation like that, I've found that mdb.initMDB(Alert, Select[, ...]) does initialize these components when the modal initially gets loaded, but when the modal gets updated, calling mdb.initMDB doesn't appear to reinitialize these components, because they were already present on the page before the modal was reloaded, so MDB thinks they're already inited.

I suspect I will need to call .dispose() on these components before replacing the modal contents, but I'd prefer a generic solution that doesn't require me to retain my own registry of available components. Does MDB have a way to call dispose() on all components that are children of a given DOM Node? Dojo, which we're moving away from, has a function "destroyRecursive()" that supports that, but I cannot find something similar in MDB.


Kamila Pieńkowska staff answered 2 weeks ago

We do not have that functionality. To initiate JS component that was added to page after pageload you do not need to use initMDB, but new Constructor. Every component have information on the API page how to perform JS init but all follow the same syntax - for example:

new mdb.Alert(element)

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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.2.0
  • Device: Desktop computer
  • Browser: Edge
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No
Tags