Modals for dynamic content

[openbrian]

We have HTML content that's added to the page dynamically. It would be nice to initialize modals for just this tree of elements. We could initialize the entire document again, but doesn't that add multiple triggers ( triggerMap[targetModal].push(trigger); )?

Would something like this work?

old - var triggers = [].concat(toConsumableArray(document.querySelectorAll('[' + options.openTrigger + ']')));
new - var triggers = [].concat(toConsumableArray(document.querySelectorAll(options.openTriggerQuery)));

Micromodal.init({openTriggerQuery: '#newstuff * [data-micromodal-trigger]'})

or maybe this
var triggers = [].concat(toConsumableArray(document.querySelectorAll(options.root + '[' + options.openTrigger + ']'));

[ghosh]

Thanks for opening this isssue. As of now this library does not have this feature. Will try and include it in a next release.

[masudhossain]

Friendly bump reminder <3

[mrpaulphan]

Second this bumb

[heaversm]

➕1. But thanks for the library - been working well. In the meantime I'm passing this along via a listener which grabs the data attribute of the clicked trigger with the info I need, and then finds the modal and replaces / inserts the content.

[dkniffin]

Just leaving a note for myself that this is still relevant. In my codebase, we ran into the same issue and solved it with something like this:

const LOAD_EVENTS = [
  'DOMContentLoaded',
  'cocoon:after-insert',
  'htmx:load'
]

LOAD_EVENTS.forEach((event) => {
  document.addEventListener(event,() => {
    // A bunch of customizations

   MicroModal.show(id, options)
  })
})

[bkno]

Thanks dkniffin. Your comment helped me with a resolve a dynamic content situation where after a DOM change (WPGB filter) the modal would stop working, and calling init again would not work.

Specifically on each trigger I used onclick="MicroModal.show('modal-ID'); return false;" instead of data-micromodal-trigger="modal-ID. Works fine now before/after DOM changes.

It did sound like #312 is a similar use case. If a refresh method could be added to avoid needing to target the micromodal by ID that would work well too.