doujin8476 2013-07-24 08:58
浏览 53

无限滚动jquery ajax

I'm using jquery ,ajax and php to implementing infinite scrolling the image from database

and the code just works one time when i reach the end of a page and show me the message "No More Content" when there is actually content in the database

here is my cod

index.php

<html >
<?php include($_SERVER["DOCUMENT_ROOT"].'/db.php'); 

$query = "SELECT * FROM photo ORDER by PhotoNo DESC limit 12";

$result = mysql_query($query) or die('Query failed: ' . mysql_error());

$actual_row_count =mysql_num_rows($result);
 ?>
<head>
   <title>Infinite Scroll</title>
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
        var page = 1;


        $(window).scroll(function () {
            $('#more').hide();
            $('#no-more').hide();

            if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                $('#more').css("top","400");
                $('#more').show();
            }
            if($(window).scrollTop() + $(window).height() == $(document).height()) {

                $('#more').hide();
                $('#no-more').hide();

                page++;

                var data = {
                    page_num: page
                };

                var actual_count = "<?php echo $actual_row_count; ?>";

                if((page-1)* 12 > actual_count){
                    $('#no-more').css("top","400");
                    $('#no-more').show();
                }else{
                    $.ajax({
                        type: "POST",
                        url: "data.php",
                        data:data,
                        success: function(res) {
                            $("#result").append(res);
                            console.log(res);
                        }
                    });
                }

            }


        });

    </script>


</head>
<body>
  <div id='more' >Loading More Content</div>
    <div id='no-more' >No More Content</div>
    <div id='result'>
        <?php
        while ($row = mysql_fetch_array($result)) {
        $rest_logo=$row['PhotoName'];
        $image="../images/rest/".$rest_logo;
            echo '<div><img src='.$image.' /></div>';
        }
        ?>
        </div>







</body>
</html>    

data.php

<?php

$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 12) . ",12";


include($_SERVER["DOCUMENT_ROOT"].'/db.php'); 

$result = mysql_query("SELECT * FROM photo ORDER by PhotoNo DESC limit $set_limit");



$html = '';

while ($row = mysql_fetch_array($result)) {
$rest_logo=$row['PhotoName'];
$image="../images/rest/".$rest_logo;
$html .= '<div><img src='.$image.' /></div>';
}


echo $html;
exit;
?>    

I really nead a help

  • 写回答

2条回答 默认 最新

  • duanpang2751 2013-07-24 09:05
    关注

    You see to be setting the variables wrong from a quick look:

    var actual_count = "<?php echo $actual_row_count; ?>";
    

    You're using mysql_num_rows() to count the return on your first set of results. But that is limited to 12.

    You need to do a second mysql query to get all the images without limi, then count them to get the total number of images in the database.

    评论

报告相同问题?

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器