-2

外部コンテンツを div にロードする必要があります。それを行うコードを見つけましたが、スクリプトが機能しなくなりました。誰かが助けることができますか？こういう仕事初心者です。

ありがとう

function ajaxFunction(id, url){
    var xmlHttp;
    try {// Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();     
    } catch (e) {// Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }

    xmlHttp.onreadystatechange = function(){
        if (xmlHttp.readyState == 4) {
            //Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
            var respText = xmlHttp.responseText.split('<body>');
            elem.innerHTML = respText[1].split('</body>')[0];
        }
    }

    var elem = document.getElementById(id);
    if (!elem) {
        alert('The element with the passed ID doesn\'t exists in your page');
        return;
    }

    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);

}

編集 - これが私の HTML コードです。これは私が私のajaxと呼んでいるものです。

<div id="right" class="anim">
    <div class="exit">
    <a class="btnclose"><span class="glyphicon glyphicon-remove"></span></a>
    </div>
    <div class="portfolio-box" id="git-box"></div>
    </div>
<div class="container">
        <div id="centerContainer" class="col-lg-12">
            <div id="grid">

                <div class="box" data-category="Branding" data-move="right">                    
                    <div class="hide" data-thumbnail="images/portfolio/branding/git.jpg"> </div>
                    <a type="link" value="Call Project" id="project-link" onclick="ajaxFunction('git-box','portfolio/git.html')">
                    <div class="thumbnail-caption">
                        <h3>Groupe<br> intégration<br> Travail</h3>
                        <h5>Branding</h5>
                    </div></a>
                </div>

編集 - これは、AJAX によって挿入された div でアクティブ化する必要があるコードです 

(function () {
    var $frame = $('#centered');
    var $wrap  = $frame.parent();

    // Call Sly on frame
    $frame.sly({
        horizontal: 1,
        itemNav: 'centered',
        smart: 1,
        activateOn: 'click',
        mouseDragging: 1,
        touchDragging: 1,
        releaseSwing: 1,
        startAt: 1,
        scrollBar: $wrap.find('.scrollbar'),
        scrollBy: 1,
        speed: 300,
        elasticBounds: 1,
        easing: 'easeOutExpo',
        dragHandle: 1,
        dynamicHandle: 1,
        clickBar: 1,

        // Buttons
        prev: $wrap.find('.prev'),
        next: $wrap.find('.next')
    });

    $(window).resize(function(e) {

    $frame.sly('reload');
    });

}());

});
4

1 に答える 1

2

関数内の ajax で読み込まれたコンテンツに適用する js 全体を配置します。

function loadSly() {
    var $frame = $('#centered');
    var $wrap  = $frame.parent();

    // Call Sly on frame
    $frame.sly({
        horizontal: 1,
        itemNav: 'centered',
        smart: 1,
        activateOn: 'click',
        mouseDragging: 1,
        touchDragging: 1,
        releaseSwing: 1,
        startAt: 1,
        scrollBar: $wrap.find('.scrollbar'),
        scrollBy: 1,
        speed: 300,
        elasticBounds: 1,
        easing: 'easeOutExpo',
        dragHandle: 1,
        dynamicHandle: 1,
        clickBar: 1,

        // Buttons
        prev: $wrap.find('.prev'),
        next: $wrap.find('.next')
    });

    $(window).resize(function(e) {
        $frame.sly('reload');
    });
}

次に、html insert の後に実行します。

xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState == 4) {
        //Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
        var respText = xmlHttp.responseText.split('<body>');
        elem.innerHTML = respText[1].split('</body>')[0];
        // here you apply the javascript code to the html loaded
        loadSly();
    }
}
于 2013-09-17T15:20:48.633 に答える