Foundation-sites: Reveal 'Open' Method throwing JS error

[tsquez]

I use Foundation for Sites mixed with WordPress in my theme WP-Forge. On my site I have a reveal window that pops up and allows the user to subscribe. You can see it here:

http://themeawesome.com/responsive-wordpress-theme/

Since I used the following from the Foundation Doc site (http://foundation.zurb.com/sites/docs/reveal.html):

jQuery('#element').foundation('open');

I get the following error:

Uncaught ReferenceError: We're sorry, 'open' is not an available method for this element.

on all the pages. Yes I replaced #elementwith the proper name. I even tried the following:

$('#element').foundation('open');

Same thing. Any idea why this error is happening?

[abdullahsalem]

I've opened the given URL, but I didn't find that error you have mentioned.
Anyway, that could also happen if the element is not already initialized as a Foundation component. Basically, every element that has any Foundation component's attribute should be already initialized once this code is executed $(document).foundation();, unless that element has been added to the DOM after that code execution, in this case you need to initialize it individually $('#element').foundation(). Hope this could help you or at least inspire you :)

[canihavesomecoffee]

I got similar errors while trying to dynamically create modals. As @abdullahsalem mentioned, one of the reasons why it happens is because the element is being added to the DOM after executing the $(document).foundation();.

I solved it by creating a Reveal instance, and then calling the open function on that variable, as follows:

var popup = new Foundation.Reveal($('#myElement'));
popup.open();

[johnnytomcat]

Pasting jQuery('#formModal').foundation('open') in the console work for me.

[brettsmason]

@tsquez It looks like this might be because of the way you are using jQuery(document).ready(function() within WordPress. To use it in this way you want you need to do jQuery(document).ready(function($) - this should solve it. Let me know if that works and I'll close this.

[tsquez]

@brettsmason - That seemed to work, now all I am getting is Uncaught TypeError: Cannot read property 'find' of undefined but this due to a plugin I use. Thank you very much for helping out on this, its greatly appreciated.

[brettsmason]

@tsquez Glad you got it sorted. That error is actually due to a bug in Reveal that has been fixed and is the dev branch. The patch 6.2.1 should be this week hopefully which includes the fix.

[hayreddinTuzelOSF]

Try to prevent rerendering of reveal element. if your reveal is a static value move it to more generic section. if it is not static, you can try to modify only reveal element's child.

[DanielRuf]

Hi @hayreddinTuzelOSF,

this issue is over 3 years old and was already resolved.

Triggering notifications and answering very old issues which are already resolved is not so much helpful.