Fancybox не работает на сайте Ajax после вызова PHP, а DOM заполняется HTML - PullRequest
Новая
       24

Fancybox не работает на сайте Ajax после вызова PHP, а DOM заполняется HTML

0 голосов
/ 23 февраля 2012

Я создаю простой ajax-сайт, который загружает #pageContent через php вызов, который заполняет DOM HTML.Я использую Fancybox для ссылок внутри #pageContent.Проблема в том, что на домашней странице fancybox работает нормально, когда я перехожу на другую страницу, хотя fancybox больше не работает и ссылки вообще не работают.Я переместил сценарии, попробовал setTimeout, pageLoad() и многие другие идеи.Пожалуйста, кто-нибудь, помогите мне, я схожу с ума по этому поводу:

Вот код:

Ajax-вызов: 

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'
     });

});

ссылки на проблему:

http://dev.abdemo.net/perfectparties

Ответы [ 2 ]

1 голос
/ 08 марта 2012

ОК, так что я понял:

в файле сценария, который выполняет вызов AJAX, при успехе вы добавляете каждый файл в заголовок следующим образом: 

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" />');

        }

    });

}

ПОТОМ И ЭТО ЕДИНСТВЕННЫЙ СПОСОБ ВЗЯТЬ ЭТО РАБОТА:

добавьте этот скрипт в конец каждого HTML-файла, загруженного в DOM: 

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

Вам придется изменить классы и идентификаторы в этих двух скриптах, но как только вы получите правильные классы и идентификаторы там, это будет работать как шарм

сайт не работает в данный момент, но вы можете увидеть его в ближайшем будущем @ www.ppratl.com

0 голосов
/ 24 февраля 2012

Поскольку параметры fancybox API в вашем скрипте, я предполагаю, что вы используете fancybox v1.3.x.Эта версия не поддерживает динамически добавляемые элементы, как в вашем случае при заполнении DOM.

Я ответил на аналогичный вопрос здесь , в котором для привязки fancybox используется метод jQuery .on().к динамически добавляемым элементам.

Настройте код для соответствия вашему контейнеру, например: 

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

... и забудьте о вещах setTimeout.

...