Menu icon Foundation
Reveal Modal not working

I'm working in a Laravel (PHP development env.) project and want to use a programmatic call to a modal window using reveal.

The problem is that no matter what I do I get the error: "TypeError: this.dispatchEvent is not a function"

If I use a button or a link ( like is shown in the examples in the web site ) it works. So, this works:

<a href="#" data-reveal-id="errorModal" data-reveal>Message</a>
            

         

but this will fail:

$('#errorModal').foundation('reveal', 'open');

            

         

It seems to me obvious that since it works using a button or link the problem is neither foundation nor JavaScript.
So why does it fail if I call the function using only JavaScript of jQuery.

Any help would be appreciated.

R.

p.s. I have foundation 5 and all corresponding links in my web page as per the snippet bellow:

<!-- content {ends}  -->
  <script src="bower_components/jquery/jquery.js"></script>
  <script src="bower_components/foundation/js/foundation.min.js"></script>
  <script src="assets/js/master.js"></script>
            

         

revealmodal

I'm working in a Laravel (PHP development env.) project and want to use a programmatic call to a modal window using reveal.

The problem is that no matter what I do I get the error: "TypeError: this.dispatchEvent is not a function"

If I use a button or a link ( like is shown in the examples in the web site ) it works. So, this works:

<a href="#" data-reveal-id="errorModal" data-reveal>Message</a>
            

         

but this will fail:

$('#errorModal').foundation('reveal', 'open');

            

         

It seems to me obvious that since it works using a button or link the problem is neither foundation nor JavaScript.
So why does it fail if I call the function using only JavaScript of jQuery.

Any help would be appreciated.

R.

p.s. I have foundation 5 and all corresponding links in my web page as per the snippet bellow:

<!-- content {ends}  -->
  <script src="bower_components/jquery/jquery.js"></script>
  <script src="bower_components/foundation/js/foundation.min.js"></script>
  <script src="assets/js/master.js"></script>
            

         
R. Alvez over 5 years ago

I just noticed that the following code works randomly.

 function errorModal(message){
    console.log(message);
    Foundation.libs.reveal.open('myModal','');
}

and I can call it with :

 errorModal('message');

Unfortunately it randomly fails with the error:
TypeError: invalid 'in' operand style

if ( name in style ) {

Klaus Pieslinger over 5 years ago

Hi, I'm getting the same error with Waterfox (64-bit Firefox) when using Foundation Clearing.
In fact it throws the error also right from the docs page at http://foundation.zurb.com/docs/components/clearing.html

Same page browsed from Chrome works fine, no error.

Artyom Iksanov over 5 years ago

Moreover.
I ran the code
Javascript
$ ('# firstModal'). Foundation ('reveal', 'open');

using the console on page http://foundation.zurb.com/docs/components/reveal.html .

And what do you think?
Got the same error...
On Foundation docs production site...
Is it possible?

Will an official response from the Zurb developers on this?

juanto over 5 years ago

Im having exactly the same problem, anyone had a solution?

juanto over 5 years ago

While someone fix the issue, I did a dirty hack to make it work, here I share it, in case someone needs to make this work.

1- added a link
Click Me For A Modal

2- and on my js code I did

$('a.reveal-link').trigger('click');