Foundation-sites: Dynamically added reveal modal does not appear

[coorasse]

I have this code that dynamically add a reveal modal to the body in my application and show it
var modal_ = $('<div id="search_box" class="reveal-modal small" data-reveal >Hello</div>'); $('body').append(modal_); modal_.foundation('reveal', 'open');

This worked great in Foundation 4 but know it doesn't work anymore in Foundation 5.
If instead I call modal_.foundation().foundation('reveal', 'open'); it works again but...is that right? Looks strange...do I have to add it everywhere?

[Tomarnst]

I have the same ....
In 4 I had working
$('#requestModal').foundation('reveal', 'open');
didn't work in 5 and used
$('#requestModal').foundation().foundation('reveal', 'open');
works again ..!?

I was wondering if I use

$(document).ready(function(){
$(document).foundation();
});

in the footer of my file correctly.

[mion00]

I think that #4225 is related to this problem..

[coorasse]

@Tomarnst If you keep $(document).foundation(); inside a $(document).ready(function(){...}) you can call it from the footer, from the header, from the body...from wherever you want cause it's called when the document is ready.
I think @mion00 linked issue may be related.

[johnvh]

I'm running into this too on 5.1.1.0. The _workaround_ is to init the widget before trying to call open. The following works:

$('<div></div>')
  .addClass('reveal-modal')
  .attr('data-reveal', '')
  .append($('<h1>Hello</h1>'))
  .appendTo($('body'))
  .foundation('reveal')     // <-- need this first!
  .foundation('reveal', 'open');

I think it's confusing because all the examples in the docs work on an already-in-DOM node. The docs make it appear that the following should work:

 $('<div></div>')
  .addClass('reveal-modal')
  .attr('data-reveal', '')
  .append($('<h1>Hello</h1>'))
  .appendTo($('body'))
  .foundation('reveal', 'open');

... but this throws an error: Uncaught TypeError: Cannot read property 'css' of undefined.

[thedeerchild]

@johnvh hit on it that you have to re-initialize the Reveal plugin after you add the new modal. This can be done by calling $(document).foundation(); or by calling $(scope).foundation('reveal'); where scope is your reveal modal element.

[coorasse]

Yeah I see that now it works if I call modal_.foundation('reveal').foundation('reveal','open') but you think is right to close the issue? Yeah, ok it works. But is ugly and frustating to call foundation('reveal') twice. Is it possible that the foundation('reveal','open') is unable to understand that the component has not been initialized and initialize it?

[andredublin]

+1 @coorasse the documentation doesn't even hint that foundation('reveal') has to be called before opening the modal.

[coorasse]

How to reopen this tockets without duplicating it?