2

プロジェクトに PJAX を使用しています。#icerikAlani というコンテナーを使用して、そのコンテンツを PJAX でロードします。基本的なレイアウトは次のとおりです。

<div class="container" id="icerikAlani" data-pjax-container>   
    <!-- NIVO SLIDER --> 
    <div class="row">
        <div class="col-md-8">
            <div id="slider" class="nivoSlider"> SLIDER CONTENT HERE... </div>
        </div>
    </div>
    <!-- SCROLLING LOGOS --> 
    <div class="row">
         <div class="col-md-12">
            <div id="logoParade"> SCROLLING LOGOS HERE... </div>
         </div>
    </div>
</div>

このコンテナには、Nivo Slider および Smooth Div Scroller プラグイン用の 2 つのスクリプト タグが含まれています。問題は、ページに移動してホームページに戻ると、スクリプト タグが機能しなくなることです。

pjax:end ステートメントを使用してこの問題を解決しようとしましたが、うまくいかなかったので、以下のように pjax:success を試しましたが、まだ運がありません。(ここで読んだように: pjax を使用する場合、ページ初期化 JavaScript をどこに配置しますか? )

ページをリロードせずにこれらのスクリプトを使用する方法はありますか?

これは、PJAX と Smooth Div Scroller スクリプトに関するスクリプトです。

<script type="text/javascript">
    $(document).pjax('a','[data-pjax-container]', { fragment: "#icerikAlani" } );
    //THIS IS HOW I ACTIVATE PJAX

    $(document).on('pjax:beforeSend', function() {
    $('#icerikAlani').fadeOut(50);
    }); 
    //WORKS...

    $(document).on('pjax:end', function() {
    $('#icerikAlani').fadeIn(400);
    });
    //WORKS...

    $(document).on('ready pjax:success', function() {
      $("#logoParade").smoothDivScroll({ 
                     autoScrollingMode: "always", 
                     autoScrollingDirection: "endlessLoopRight", 
                     autoScrollingStep: 1, 
                     autoScrollingInterval: 25 
             });
   //FAILS...
});
</script>

ここで完全なコードを確認できます

私は JavaScript の経験がないため、プロジェクトを完了する前にこの問題が壁のように立ちはだかっています。スライダーとスクローラーの両方で機能するものが見つかることを願っています。

4

1 に答える 1