Бесконечная прокрутка на странице, загруженной ajax

Question

У меня есть страница (назовем ее 1.php), которая загружает 2.php в блок div, используя jQuery-ajax. 2.php печатает 20 записей из моей базы данных. Когда при прокрутке я достигаю нижней части блока div, я хочу загрузить следующие 20 записей. Как это делают Facebook, Twitter и т. Д.

Теперь я получил это поведение, но только при загрузке 2.php самостоятельно! Но не в блоке div.

Как мне это сделать?

Заранее спасибо!

Answer 1

Файл 1.php должен вывести это:

<div id="content">
</div>

<script type="text/javascript">
  $(document).ready(function() {
    // when we scroll, check the position:
    $(window).scroll(function()
    {
      // if at bottom, add new content:
      if  ($(window).scrollTop() == $(document).height() - $(window).height())
      {
        $.get("2.php",function(data) {
          $("#content").append(data);
        },'html');
      }

    }); 

  });
</script>

Если вы хотите отправить номер итерации в 2.php, вы можете запомнить его в каком-то скрытом вводе и отправить в качестве аргумента $ .get ().

Надеюсь, это поможет.

Answer 2

Рассмотрите возможность использования плагина waypoints для jQuery: http://imakewebthings.github.com/jquery-waypoints/

И посмотрите на пример бесконечной прокрутки: http://imakewebthings.github.com/jquery-waypoints/infinite-scroll/

Answer 3

Возможно, у вас есть некоторый код инициализации Javascript в 2.php для настройки обработчика события прокрутки.Этот код инициализации не выполняется, когда вы загружаете страницу с помощью ajax и помещаете ее в div.Вам нужно будет выполнить тот же код инициализации после обработки Ajax-запроса.

Answer 4

Ключ здесь определяет положение прокрутки. Это работает правильно?