Opening a modal fails when triggering anchors are programatically created

[rkgttr]

Hi Humaan,

Greetings from another Perth frontender.

I've noticed an annoying bug with Modaal: I have a project where I dynamically add/create or remove elements to a list based on user filtering. A very basic webapp.
Some of these elements contains anchor links that are supposed to open modals. So because these links are not in the markup on page load, I have to use JavaScript to open the modals rather than using the data attributes. I also have to delegate the click handlers like this:

$(document).on('click', 'selector', e => {
    e.preventDefault();     
     $(e.currentTarget).modaal(); 
  });

And well, that doesn't work, I have to click twice for it to open the modal. The first click does some modal initialisation stuff, but doesn't go as far as opening it.
I've found a workaround that looks like:

$(document).on('click', 'selector', e => {
    e.preventDefault();        
    if(!$(e.currentTarget).data('modaal-scope')) {
      $(e.currentTarget).modaal();
      setTimeout(()=> $(e.currentTarget).trigger('click'), 20);
    } else {
      $(e.currentTarget).modaal();
    }
  });

And it works, but it lacks elegance.

I think a static method to open a modal, one that doesn't rely on an anchor/modal coupling, could solve this. Something like Modaal.open('selector'). Or you might want to investigate the way your register your events handlers.

Anyway, thanks for your great plugin.

[danhumaan]

Hey @rkgttr thanks for raising the issue and sharing your findings. I think this will be a pretty quick fix, so we'll try to prioritise it for the next milestone release.

[alex-steinberg]

I second this request :-)

[L5eoneill]

I third this request, over a year later. Is it going to be fixed? I use delegated event binding for everything else. Seems like it ought to be just as easy for triggering Modaals.

Thanks very much, @rkgttr, for the workaround.

[danhumaan]

Thanks all for your patience. Since the ticket was raised, we have implemented a new open method which will become available in the next release, but have some direction to provide on how we recommend programatically created links can be triggered to open both now, and in the next release.

As it stands, any new modaal link created programatically can be triggered to show using:

$('.my-link').modaal({ start_open: true });

The start_open: true option can be used at doc ready, or programatically to ensure it launches straight away once initialised. In the next release, we recommend using the same approach to opening programatically creating new links as it will allow you to define any other options you would like that modaal to have.

Once a modaal has been initialised, be it programatically or on doc ready, our next release will make it possible to call $('.my-link').modaal('open'); to trigger it to open. Note, this will only work if the modaal has already been initialised through $('.my-link').modaal();

We have not invested time into providing calls that look like Modaal.open() as we feel establishing any calls like that would ultimately be calling the previously outlined open methods anyway.

The other, less recommended, approach which will also works in the next release is to call $('.my-link').modaal().modaal('open');. It's not clean, or recommended because it can be simplified down to the first .modaal() with options, including start_open: true;

Please keep an eye out for the next release when the .modaal('open') becomes available.