Jquery Ajax Polling在每次通话时都会跳到顶部

时间:2013-07-24 09:11:41

标签: ajax jquery ajax-polling

我使用下面的函数来显示当前活动的gameList。现在的问题是,如果一个玩家正在浏览列表,并且如果执行了ajax调用,那么它会跳转到div的顶部,我将用ajax调用的响应替换它。

如何避免跳到div的顶部?还是应该实现的任何其他解决方案,以显示最新游戏列表而无需跳过ajax调用?

(function pollServerForGameList() { 
        $.ajax({
            url:"<?php echo Yii::app()->createUrl('game/getGameList') ?>",
            data:{'id':<?php echo Yii::app()->request->getParam('id')?>},
            type:"POST",
            dataType:"html",
            success:function(response){
                $('.multiplayer').html(response);
            },
        });
        setTimeout(pollServerForGameList, 2000);
    }());

单行响应,包含一些数据和按钮以加入游戏。

    <ul>
    <li class="first">Math</li>    
    <li>Rookie</li>
    <li>Guest11</li><li>1</li>
    <li class="last"><b><a id="Join" class="greenBtn" href="/game/multiple?id=4&amp;gameid=20&amp;diff=2&amp;cat=4">Join the Game</a></b>
    </li>
    </ul>

多行响应将有多个&lt;

1 个答案:

答案 0 :(得分:2)

您可以尝试保存当前滚动位置,然后在插入后返回它。

(function pollServerForGameList() { 
    //Save current scroll position
    var currPosition = $(window).scrollTop();
    $.ajax({
        url:"<?php echo Yii::app()->createUrl('game/getGameList') ?>",
        data:{'id':<?php echo Yii::app()->request->getParam('id')?>},
        type:"POST",
        dataType:"html",
        success:function(response){
            $('.multiplayer').html(response);
            //Return to the scroll position
            $(window).scrollTop(currPosition);
        },
    });
    setTimeout(pollServerForGameList, 2000);
}());