Fancybox not working on Ajax site after PHP call and DOM repopulates with HTML

Question

Im building a simple ajax website that loads #pageContent through a php call that populates the DOM with HTML. I'm using Fancybox for links within the #pageContent. Problem is on the home page the fancybox works fine when I go to another page though the fancybox doen't work anymore and the links do not work at all. I have moved scripts around tried setTimeout, pageLoad(), and many other ideas. Please someone help me Im going crazy about this:

Here is the code:

Ajax call:

var default_content="";

$(document).ready(function(){

checkURL();
$('ul li a').click(function (e){

        checkURL(this.hash);

});

//filling in the default content
default_content = $('#pageContent').html();


setInterval("checkURL()",250);


});
var lasturl="";

function checkURL(hash)
{
if(!hash) hash=window.location.hash;

if(hash != lasturl)
{
    lasturl=hash;

    // FIX - if we've used the history buttons to return to the homepage,
    // fill the pageContent with the default_content

    if(hash=="")
    $('#pageContent').html(default_content);

    else
    loadPage(hash);
}
}


function loadPage(url)
{
url=url.replace('#page','');

$('#loading').css('visibility','visible');

$.ajax({
    type: "POST",
    url: "load_page.php",
    data: 'page='+url,
    dataType: "html",
    success: function(msg){


        if(parseInt(msg)!=0)
        {
            $('#pageContent').html(msg);
            $('#loading').css('visibility','hidden');
        }
    }

});

}

Fancybox script fire:

$(document).ready(function(){
    $(".extLink").fancybox({
         'width' : '75%',
         'height' : '100%',
         'autoScale' : false,
         'transitionIn' : 'elastic',
         'transitionOut' : 'fade',
         'type' : 'iframe'
     });

});

links to the problem are as follows:

http://dev.abdemo.net/perfectparties

score 1 · Answer 1 · answered Mar 07 '12 at 22:04

OK so i figured it out:

on the script file that makes the AJAX call, under success you append each file to the head like so:

function loadPage(url)
{
    url=url.replace('#page','');

    $('#loading').css('visibility','visible');

    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){



            if(parseInt(msg)!=0)
            {
                $('#pageContent').html(msg);
                $('#loading').css('visibility','hidden');
            }
            $('head').append('<link type="text/javascript" src="jquery-1.3.2.min.js" />');
            $('head').append('<link rel="stylesheet" href="deckfire.css" type="text/css" />');
            $('head').append('<link type="text/javascript" src="slidedeck.jquery.js" />');
            $('head').append('<link type="text/javascript" src="deckfire.js" />');

        }

    });

}

THEN AND THIS IS THE ONLY WAY TO MAKE IT WORK:

add this script to the bottom of each html file loaded in the DOM:

$(document).ready(function(){
    if (jQuery.browser.safari && document.readyState != "complete"){
        setTimeout( arguments.callee, 100 );
        return;
    }
    window.Deck = $('.slidedeck').slidedeck();
});

You will have to change the classes and ID's in these two scripts but once you get the right classes and id's in there it works like a charm

site isnt up at this moment but you may see it in the near future @ www.ppratl.com

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

Because the fancybox API options in your script, I assume that you are using fancybox v1.3.x. That version doesn't support dynamically added elements, which is your case when you populate the DOM.

I answered a similar question here, which uses the jQuery .on() method to bind fancybox to dynamically added elements.

Tweak the code to match your container like:

$("#pageContent").on("focusin", function(){...

... and forget about the setTimeout stuff.

edited May 23 '17 at 12:11

Community

1
1

answered Feb 23 '12 at 20:04

JFK

40,963
31
133
306

This does work if I am adding content to a page but not when replacing it... I have the same issue going on here... http://dev.abdemo.net/ppr/governmentprojects/index.html – DJERock Mar 07 '12 at 19:21
This time its involving replacing the content with a slider. I tried using loadObjs() this time but the scripts and css never reapply to the HTML content even if I put the scripts on the html page directly.' – DJERock Mar 07 '12 at 19:23
It does work when you replace the content too, see demo: http://picssel.com/playground/jquery/jQueryONreplacingContent_07mar12.html .... just be sure that the new content goes on the container where you aplly the `.on()` method – JFK Mar 07 '12 at 21:30
BTW, the page you just mentioned has several js errors that may be creating the issue. Additionally I don't see that you were using fancybox on that page. – JFK Mar 07 '12 at 21:36

Fancybox not working on Ajax site after PHP call and DOM repopulates with HTML

2 Answers2