Question

我正在尝试在滑动div上显示文字。要显示的文本使用ajax动态加载。在加载文本之前，滑块div工作正常，但在单击链接并且div填充了数据后，滑块停止工作。我不知道如何解决这个问题。实时样本为here。尝试点击类似事件的链接，然后点击返回设计，看看会发生什么。我的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';
}
?>

Answer 1

最有可能在你的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');
            }
        }

    });

Answer 2

我认为你应该做一个获取请求而不是帖子。您没有在服务器上发布内容（滑块内容）。您还必须更改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
            }
        }

Ajax加载幻灯片失败

2 个答案: