Topic: Problem with accordion init after migration to V7.2.0 and UMD format
Expected behavior accordion should init
Actual behavior accordion does not init
Hello,
after migrating to V7.2.0 UMD format, accordion that is loaded using js does not init.
Here is an example in this snippet : https://mdbootstrap.com/snippets/standard/efilippi/6033832
if I add a fake button <button data-mdb-collapse-init class="d-none"></button> in the html part, it's ok
But if I remove this fake button, the accordion does not init.
Thank you for your help.
Autoinit works when the element is available on the page. If the element is added dynamically, it is necessary to perform init manually. Like this:
const accordionEl = document.querySelector('#accordionExample')
const accordionInstance = mdb.Collapse.getOrCreateInstance(accordionEl)
Hi,
thank you for this answer.
The data-mdb-collapse-init is at the button level, but in your script, you point to the id of the parent div #sortableExample. How do we know wich node to select to apply the getOrCreateInstance function ? Is it written in the documentation of each components to init ?
Furthermore, does it work the same for all inits ?
for instance : data-mdb-sortable-init =>
const sortableDiv = document.querySelector('#sortableExample')
const sortableInstance = mdb.Sortable.getOrCreateInstance(sortableDiv)
Grzegorz Bujański staff commented 9 months ago
Each component and plugin in the api section has an example of how to init component/plugin via JS. For example, for sortable you can find it here: https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/#api-section-usage
efilippi pro premium priority commented 9 months ago
I'm sorry but I still don't get the point.
For accordion component, the api section documentation gives :
const element = document.querySelector('.accordion-button')
const instance = new mdb.Collapse(element)
which points to the button nodeBut in your first answer you give :
const accordionEl = document.querySelector('#accordionExample')
const accordionInstance = mdb.Collapse.getOrCreateInstance(accordionEl)
which points to the accordion items' parent div.
I thank you for this first answer that works perfectly, but I need to understand why it's different from the doc api section to avoid asking questons for each component I use.
Grzegorz Bujański staff commented 9 months ago
In the case of accordion, init using js can be done on a button, as we show in the API section, or on a parent div. In other cases, use JS init in the same way as shown in the documentation.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.2.0
- Device: laptop
- Browser: firefox / chrome
- OS: windows
- Provided sample code: No
- Provided link: Yes