1

スライド div にテキストを表示しようとしています。表示されるテキストは、ajax を使用して動的に読み込まれます。テキストが読み込まれる前は、スライダー div は正常に機能しますが、リンクがクリックされて div にデータが入力されると、スライダーは機能しなくなります。これを修正する方法がわかりません。ライブサンプルはこちら. イベントなどのリンクをクリックしてから、デザインに戻ってクリックしてみてください。私のhtmlはここにあります

<div class="coda-slider"  id="slider-id">
                    <div>
                        <?php
                        $counter = 0;
                        for ($x = 0; $x < 8; $x++) {
                            $counter++;
                            ?>
                            <div class="galleryitem">
                                <a href="images/flyer1.png" target="" rel="galleryitem"> <img src="images/flyer<?php echo $counter; ?>.png" alt="Flyer <?php echo $counter; ?>" title="Click to view more"/></a>
                                <!--strong>Flyer</strong-->
                                <span class="description"><strong>Item <?php echo $counter; ?></strong> Simple description..Lorem ipsum dolor sit amet, consectetuer adipiscing elit...<a href="product.php">more</a></span>

                            </div>
                        <?php } ?>
                    </div>

                </div>

ajax ローダーの私のコードはこちらです。

var default_content="";
$(document).ready(function(){
    checkURL();
    $('ul li a').click(function (e){
        checkURL(this.hash);
    });
    //filling in the default content
    default_content = $('#slider-id').html();
    setInterval("checkURL()",250);
});

var lasturl="";
function checkURL(hash)
{
    if(!hash) hash=window.location.hash;
    if(hash != lasturl)
    {
        lasturl=hash;
        if(hash=="")
            $('#slider-id').html(default_content);
        else
            loadPage(hash);
    }
}


function loadPage(url)
{
    url=url.replace('#','');
    $('#loading').css('visibility','visible');
    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){
            if(parseInt(msg)!=0)
            {

                $('#slider-id').html(msg);
                $('#loading').css('visibility','hidden');
            }
        }

    });

}

PHP バックエンドのコードはこちらです。

<?php
if (!$_POST['page'])
    die("0");
$page = $_POST['page'];
if ($page == 'design') {
    ?>

    <div>
        <?php
        $counter = 0;
        for ($x = 0; $x < 4; $x++) {
            $counter++;
            ?>
            <div class="galleryitem">
                <a href="images/flyer1.png" target="" rel="galleryitem"> <img src="images/flyer<?php echo $counter; ?>.png" alt="Flyer <?php echo $counter; ?>" title="Click to view more"/></a>
                <!--strong>Flyer</strong-->
                <span class="description"><strong>Item <?php echo $counter; ?></strong> Simple description..Lorem ipsum dolor sit amet, consectetuer adipiscing elit...<a href="product.php">more</a></span>
            </div>
        <?php } ?>
    </div>
    <?php
} else {
    echo 'No lists in that category';
}
?>
4

2 に答える 2

0

投稿の代わりにgetリクエストを行うべきだと思います。何か（スライダーのコンテンツ）を取得しているサーバーに投稿していません。load_page.phpも変更する必要があります。

コードを見ると、新しいコンテンツを追加した後はスライダー関数を呼び出さないようです。おそらく、成功コールバックで呼び出す必要があります。

$.ajax({
        type: "GET",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){
            if(parseInt(msg)!=0)
            {
                // guess you have some slider function

                $('#slider-id').html(msg);
                $('#loading').css('visibility','hidden');
                $('#slider-id').slider(); //example of slider function
            }
        }
于 2012-12-17T08:01:52.297 に答える
0

ほとんどの場合、ここで ajax をこれに変更します

$.ajax({
        type: "POST",
        url: "load_page.php",
        data: {'page':url }, /** this is syntax of POST**/
        dataType: "html",
        success: function(msg){
            if(msg.length > 0)
            {

                $('#slider-id').html(msg);
                $('#loading').css('visibility','hidden');
            }
        }

    });
于 2012-12-17T07:56:21.207 に答える