Menu icon Foundation
Reveal modal events not firing (open.fndtn.reveal)

Hey there,

I just encountered an issue with the new Foundation v5.5.2 concerning Reveal Modal:
We corrected one of our scripts from

$(document).on('open.fndtn', '[data-reveal]', function(){
// do something
};

to

$(document).on('open.fndtn.reveal', '[data-reveal]', function(){
// do something
};

in order to apply to the new event handlers. But now the open event does not fire at all, can somebody please help?

Thank you and kind regards
Dominik

revealmodalevent handleropen open.fndtn.reveal

Hey there,

I just encountered an issue with the new Foundation v5.5.2 concerning Reveal Modal:
We corrected one of our scripts from

$(document).on('open.fndtn', '[data-reveal]', function(){
// do something
};

to

$(document).on('open.fndtn.reveal', '[data-reveal]', function(){
// do something
};

in order to apply to the new event handlers. But now the open event does not fire at all, can somebody please help?

Thank you and kind regards
Dominik

Dominik Scholz over 3 years ago

Anybody experiencing the same problem maybe?

Dominik Scholz over 3 years ago

We would really appreciate it if someone could provide a solution to this problem. Is it just a bug in Foundation v5.5.2 or are we doing something wrong?

Communication is rather chewy in this forum... :-((

l3x over 3 years ago

I'm using version 5.5.0 but at least there is no problem with the 'open.fndtn.reveal' event. Perhaps it is due to some flaw in your code but with the extract you've provided I can not reproduce the error.

If I saw you missed a parentheses. Perhaps that is the mistake?

$(document).on('open.fndtn.reveal', '[data-reveal]', function(){
// do something
});

Dominik Scholz over 3 years ago

Thanks for your reply, I3x! Even if this post is 2 months old, the problem is still the same over here.

I now tried it once again, using your v5.5.0 and current v5.5.2 (fresh download from this website) - no chance to get the open.fndtn.reveal event fired. This is really weird, as the event does not seem to be fired at all. Here's my code:

 $(document).on('open.fndtn', '[data-reveal]', function(){
    console.log('test');
    var modal = $(this);
    keywords_tmp = $("textarea[name='ste_keywords']").val();
    $("#vorschlaege").html('<div class="columns">...</div>');
    if($("#ste_eingabe_komfort").prop('checked')){
        bewerberprofil_tmp = tinymce.get('ste_infotext_3').getContent();
        stellenprofil_tmp = tinymce.get('ste_infotext_2').getContent();
    }else{
        bewerberprofil_tmp = tinymce.get('ste_infotext').getContent();
        stellenprofil_tmp = '';
    };
    $.post("front_content.php?idart=309",{
        titel: $("input[name='ste_bezeichnung']").val(),
        text1: bewerberprofil_tmp,
        text2: stellenprofil_tmp
    },function(data){
        var keywords = $.parseJSON(data);
        if(keywords.length > 0){
            $("#vorschlaege").html('');
            $.each(keywords,function(index,value){
                if(value != null){
                    if(value.length > maxL){
                        value_tmp = value.substr(0,maxL) + '...';
                    }else{
                        value_tmp = value;
                    };
                    $("#vorschlaege").append('<div class="medium-6 columns vorschlag"><input type="checkbox" checked="checked" id="vorschlag_'+index+'" value="'+value+'" /><label for="vorschlag_'+index+'" title="'+value+'">'+value_tmp+'</label></div>');
                };
            });
        }else{
            $("#vorschlaege").html("Für Ihre Stellenbeschreibung konnten keine Schlagwörter generiert werden.<br />Sie können es erneut versuchen, indem Sie den Schlagwort-Generator noch einmal aufrufen.");
        };
    });
});

As you can see, I inserted a console.log() at the very beginning, but it does not show up in the console window.

l3x over 3 years ago

I recommend you to comment that code and execute in the browser console:

$(document).on('open.fndtn.reveal', '[data-reveal]', function(){
console.log('test');
});

Check if that works.

A failure loading javascript avoid executing other code.

Also you will verify if binding the event works.

Dominik Scholz over 3 years ago

Manually attaching the event handler via browser console works just fine, THANKS a lot!

But still I'm wondering, what could be the mistake, as there are no javascript errors shown in console. I didn't change anything, except for switching foundation versions and changing the event handler from "open.fndtn" to "open.fndtn.reveal" (to correspond to the new framework version).

Gonna have a rummage now to spot the error...

Andras Taraszovics over 3 years ago

We have the same issue here. Just updated to the latest Foundation release from 5.1.1 and updated the event names to namespaced ones. I can successfully catch all the events including open, opened, closed when attaching event listeners in the console but none of them when handling them from actual javascript files.

This was the code actually working for us for over a year:

 $(document).on('opened', '[data-reveal]', function (e) {
            e.preventDefault();
            if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) {
                $el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?autoplay=1&amp;rel=0&amp;vq=hd720&amp;showinfo=0&amp;disablekb=1&amp;modestbranding=1&amp;enablejsapi=1amp;origin=*" frameborder="0" allowfullscreen></iframe>')
                    .removeClass('lazyYT-image-loaded')
                    .addClass('lazyYT-video-loaded');
            }
        });

And the new one which does absolutely nothing:

 $(document).on('opened.fndtn.reveal', '[data-reveal]', function (e) {
            e.preventDefault();
            if (!$el.hasClass('lazyYT-video-loaded') && $el.hasClass('lazyYT-image-loaded')) {
                $el.html('<iframe width="' + width + '" height="' + height + '" src="//www.youtube.com/embed/' + id + '?autoplay=1&amp;rel=0&amp;vq=hd720&amp;showinfo=0&amp;disablekb=1&amp;modestbranding=1&amp;enablejsapi=1amp;origin=*" frameborder="0" allowfullscreen></iframe>')
                    .removeClass('lazyYT-image-loaded')
                    .addClass('lazyYT-video-loaded');
            }
        });

Zac Feuerborn over 3 years ago

For what it's worth, I was running into the same issue using Foundation with Angular. You can put the markup on the page as part of a view, and even open it using $(elem).foundation('reveal', 'open'). However, if you do not do a $(elem).foundation('reflow') before you start using it the events won't fire.

What tipped me off to this is when I was looking through the Reveal code I noticed it is wiring up internal events on itself so it knows when certain things happen. When you skip the 'reflow' method, none of those events wire up so it doesn't have any of it's internal event wiring setup to know when to fire the external events. By adding the the foundation('reflow') method as part of initialization, all my events that were not working started working immediately.

I should note I was seeing the breakage when moving from Foundation 5.1.1 to 5.3.3. I tried updating only Reveal to 5.5.3 when troubleshooting but that didn't help. Adding the 'reflow' methods fixes the events in both 5.3.3 and 5.5.3, so there must of been some big wiring changes between 5.1.1. and 5.3.3, I didn't take the time to do an in-depth comparison.

Matt Stone about 3 years ago

Same issue here. Reduced test case shows event handler bound in jQuery document load IS NOT triggered, but attaching event handler in browser console IS triggered.

Dmytro Kharchenko about 3 years ago

I've just encountered the same issue.

Assigning the opened.fndtn.reveal handler in the console worked.
Having the event bound in my script inside document.ready event handler yielded no effect.
Putting the handler outside document.ready did not help, too.

What did work for me, is to put it inside the handler for window.load, which looks like a satisfactory workaround.

Hope this helps.

Francis Chung almost 3 years ago

After spending a day trying to fix the Foundation events bug, I found manually hooking up the events worked as laid out in this post (2nd answer)

http://stackoverflow.com/questions/13745505/how-to-use-zurb-foundation-reveal-with-open-opened-close-closed-callback-func

Rafi Benkual almost 3 years ago

@Francis Chung Awesome Francis! Thanks for posting back your solution!

Chris Sun almost 3 years ago

 I got the open/close events firing by following a previous comment made by Zac Feuerborn which mentioned "reflow".  I'm using Foundation 5.5.3 
# Reflow will make Foundation check the DOM

for any elements and re-apply any listeners to them.

$(document).foundation('reveal', 'reflow');
$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
console.log('Modal was opened');
});