Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Problem with accordion init after migration to V7.2.0 and UMD format

efilippi priority asked 9 months ago


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.


Grzegorz Bujański staff answered 9 months ago


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)

efilippi priority answered 8 months ago


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 8 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 priority commented 8 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 8 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.



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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.2.0
  • Device: laptop
  • Browser: firefox / chrome
  • OS: windows
  • Provided sample code: Yes
  • Provided link: Yes