利用无限滚动瓦特/ MySQL数据库 [英] Using infinite scroll w/ a MySQL Database

问题描述

我找到了一个不错的Ajax / jQuery的无限滚动的插件（的http://hycus.com/2011/03/15/infinite-scrolling-like-new-twitter-with-php-mysql-jquery/ ），我是能够塑造好我的内容，但我有一个问题 - 它只是调用loadmore.php脚本一次。让我告诉了code：

I found a nice ajax/jquery infinite scroll plugin ( http://hycus.com/2011/03/15/infinite-scrolling-like-new-twitter-with-php-mysql-jquery/ ) that I was able to mold well to my content, but I'm having one issue -- it only calls the loadmore.php script once. Let me show the code:

在我的index.php文件：

In my index.php file:

<script type="text/javascript">
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            $('div#loadmoreajaxloader').show();
            $.ajax({
                url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                success: function(html){
                    if(html){
                        $("#postswrapper").append(html);
                        $('div#loadmoreajaxloader').hide();
                    }else{
                        $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                    }
                }
            });
        }
    });
</script>

本节叫我loadmore.php文件，并将其发送的最后一个帖子的ID。这只有我第一次滚动到页面的底部，它加载项从loadmore.php但不调用loadmore.php了。我loadmore.php文件具有以下code：

This section calls my loadmore.php file and sends it the id of the last post. This only works the first time I scroll to the bottom of the page, it loads the entries from loadmore.php but doesn't call loadmore.php again. My loadmore.php file has the following code:

<?php

include('./includes/config.php');

if($_GET['lastid']){
    $query = 'SELECT * FROM db WHERE id < "'.$_GET['lastid'].'" ORDER BY id DESC LIMIT 0,3';
    $result = mysql_query($query);
    while ($rec = mysql_fetch_object($result)) {

    [SET MY VARS]

    ?>

    [HTML & PHP DISPLAYING MY POST]

    <?php
    }
}

?>

3的职位，第一个AJAX调用后显示拿出完美的，正是我希望他们用正确的数据显示的方式。但我不能在接下来的3职位后的第一个3展现出来露面。

The 3 posts that show up after the first ajax call come up perfectly, exactly the way I want them to show with the correct data. But I can't get the next 3 posts to show up after the first 3 show up.

所以，如果我有5个岗位上默认我的index.php，我滚动至底部，AJAX调用3个职位，他们表现完美，但没有显示后，即使有大量的职位留给显示。哪里是我的问题，AJAX / jQuery的向导？

So if I have 5 posts by default on my index.php, I scroll to the bottom, ajax calls 3 more posts, they display perfectly, but nothing displays after that even though there are plenty of posts left to display. Where's my problem, ajax/jquery wizards?

推荐答案

您的如果条件既满足了第一次滚动。所以基本上，该事件被解雇，而不是当你滚动到页面的底部，但是当你开始滚动。用下面的替换你的code：

Your "if" condition is only satisfied the first time you scroll. So essentially, the event is getting fired, not when you scroll to the bottom of the page, but when you start scrolling. Replace your code with the following:

<script type="text/javascript">
    var loading = false;

    $(window).scroll(function(){
        var h = $('#postswrapper').height();
        var st = $(window).scrollTop();

         // the following tests to check if 
         // 1. the scrollTop is at least at 70% of the height of the div, and 
         // 2. another request to the ajax is not already running and 
         // 3. the height of the div is at least 500. 
         // You may have to tweak these values to work for you. 
        if(st >= 0.7*h && !loading && h > 500){
            loading = true;
            $('div#loadmoreajaxloader').show();
            $.ajax({
                url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                success: function(html){
                    if(html){
                        $("#postswrapper").append(html);
                        $('div#loadmoreajaxloader').hide();
                    }else{
                        $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                    }
                    loading = false;
                }
            });
        }
    });
</script>

这篇关于利用无限滚动瓦特/ MySQL数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！