How to apply fancybox to dynamic Async content

Question

I have a calendar on my website which uses ajax to switch between the different months and years. The calendar displays event titles for the respective days and when the user mousesover the title a lightbox should popup providing more information.

I have this all working up until the user changes the month or year with the buttons I provided. After that it seems fancybox isn't applied to the new elements.

I know it is because the elements were added to the dom after the initial fancybox definition and have taken care of it with code similar to this:

    $('.date').live('focusin', function() {
    var $this = $(this);
    if(!$this.is(':data(datepicker)')) {
        $this.datepicker();
    }
});

This was used in conjunction with jQuery UI's datepicker.

I tried to replicate this code with this:

$('div#calendar').live('mouseover', function() {
            $("a.event_link").fancybox({
                'width'             : 610,
                'height'            : 347,
                'autoScale'         : false,
                'overlayOpacity'    : 0.8,
                'overlayColor'      : '#000',
                'type'              : 'iframe',
                'padding'           : '5px',
                'margin'            : '5px',
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });

            $('a.event_link').live('mouseover', function() {
                $(this).trigger('click');
            });
        });

With this code, its still functions properly when the page first loads but once the user changes the month or year, nothing happens.

I've tried many variations of this such as placing this inside a function and adding a setTimeout() right before the end, but I still get the same behavior.

The only thing I see different between the functional code and the non-functional is the use of $this, is it possible that I can't do a broad assignment of fancybox to multiple elements in this manor?

If anyone has any ideas, It would be greatly appreciated.

score 2 · Accepted Answer · edited May 23 '17 at 11:43

If you are using fancybox v2.x then you don't need the .live() method because fancybox v2.x supports both existing and dynamically added (ajax) elements so just bind your selector to fancybox like :

   $(document).ready(function(){
       $("a.event_link").fancybox({
            'width'             : 610,
            'height'            : 347,
            'autoScale'         : false,
            'overlayOpacity'    : 0.8,
            'overlayColor'      : '#000',
            'type'              : 'iframe',
            'padding'           : '5px',
            'margin'            : '5px',
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic'
        });
   });

On the other hand, if you are using fancybox v1.3.4, which doesn't support dynamically added elements, then check https://stackoverflow.com/a/9084293/1055987 for a further explanation, workaround and demo.

UPDATE (Nov 15, 2012) : in your specific situation (using fancybox v1.3.4), we would need to redefine the way the mouseover event is delegated so this code :

$(document).ready(function() {
    // open fancybox on mouseover
    $("div#cal-wrapper").on("mouseover", "a.event_link", function() {
        $("a.event_link").fancybox({
          // API options here
        }).trigger("click");
    }); // on
}); // ready

... should do the trick. See FIDDLE

Thank you @jfk. I have yet to convince my employer to go for the license for 2.0, but the link to the other question seems like it will work. If it doesn't then I will be sure to come back and post, otherwise it did work. — d.lanza38, Nov 13 '12 at 20:35
Your solution is 100% correct, in jsfiddle and in a test page I made with the exact code you provided (adding the includes to fancybox), it works. For my actual need for it with my calendar it doesn't work, but I believe that is because the error lies somewhere else. — d.lanza38, Nov 16 '12 at 15:11

How to apply fancybox to dynamic Async content

1 Answers1