Использование бесконечной прокрутки с базой данных MySQL - PullRequest
Новая
       270

Использование бесконечной прокрутки с базой данных MySQL

0 голосов
/ 21 сентября 2011

Я нашел хороший плагин ajax / jquery для бесконечной прокрутки (http://hycus.com/2011/03/15/infinite-scrolling-like-new-twitter-with-php-mysql-jquery/), который мне удалось вписать в мой контент, но у меня возникла одна проблема - он вызывает скрипт loadmore.php только один раз , Позвольте мне показать код:

В моем файле index.php: 

<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 и отправляет ему идентификатор последнего сообщения. Это работает только в первый раз, когда я прокручиваю до конца страницы, он загружает записи из loadmore.php, но больше не вызывает loadmore.php. Мой файл loadmore.php имеет следующий код: 

<?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.

Так что, если у меня по умолчанию есть 5 постов в index.php, я прокручиваю до конца, ajax вызывает еще 3 поста, они отображаются отлично, но после этого ничего не отображается, даже если осталось много постов для отображения. Где моя проблема, волшебники ajax / jquery?

Ответы [ 2 ]

2 голосов
/ 22 октября 2012

Будет ли приведенный выше пример кода со следующими модами работать для запуска функции на фиксированной высоте снизу ??

Добавить: 

var trigger = $('#postswrapper').height() - 250;

И изменить: 

if (st >= 0.7*h && !loading && h > 500) {

до: 

if ((st == trigger) && (!loading) && (h > 500)) {
1 голос
/ 21 сентября 2011

Ваше условие "если" выполнено только при первой прокрутке. По сути, событие запускается не тогда, когда вы прокручиваете страницу вниз, а когда вы начинаете прокрутку. Замените ваш код следующим: 

<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>
...