Geek Blog Post – Get Fancybox to work after Ajax update

I usually don’t go super geeky and post related to programming I usually only post major site updates, but I feel I need to post this javascipt code post. Warning, this post goes into super geeks mode starting now.

I’ve been searching to fix a bug in a site that I am developing. It a bug where if you load content using ajax that contains a fancybox link, you can not load the fancybox because fancybox is executed when the page and DOM where originally loaded. You need to find a method to reload fancybox. I’ve tried live and livequery, but after a few hours of fighting they would not work. After an intense google battle I came across this blog post:

http://alex.mamchenkov.net/2010/05/21/jquery-fancybox-with-ajax/

This blog contains the solution that I was looking for. I’m going to post the solution here as well. I figure the most places this is posted, the more people will find it when they are looking for it:

$.getJSON(ajax_url,function(HTML) {

    // populate my DOM with some HTML here

    // make fancybox reinit
    setTimeout(
        function() {
            $("a.some_fancy_box_element_class").fancybox();
        },
        600
    );
});

I hope this helps someone.