Подтвердить что ты не робот

Функция AJAX не работает с помощью прокрутки

Использование AJAX для бесконечного прокрутки. Содержимое загружается только в первый раз, но не загружается прокруткой.

Что не так?

JQuery

function loadFeed() {
    $.ajax({
        url: 'loadmore.php',
        dataType: 'html',
        success: function (data) {
            $("#posts").append('<div class="havanagila"></div>');
            $('#posts').html(data);
        }
    });
}

loadFeed();
$(window).scroll(function () {
    var windowScroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    var documentHeight = $(document).height();

    if ((windowScroll + windowHeight) == documentHeight) {
        loadFeed();
    }
});

loadmore.php:

<?php 
session_start();

if ( isset( $_SESSION['login'] ) ) {

    $login    = $_SESSION['login'];
    $id=$_SESSION['id'];

    $username="root";
    $password="root";
    $hostname = "localhost";
    $dbname= "kotik";


    function testdb_connect ($hostname, $username, $password){
        $dbh = new PDO("mysql:host=$hostname;dbname=kotik", $username, $password);
        return $dbh;
    }


    try {
        $dbh = testdb_connect ($hostname, $username, $password);

    } catch(PDOException $e) {
        echo $e->getMessage();
    }

}

?>

<?php                                                              

$title_select_query= $dbh -> prepare("SELECT title FROM books WHERE id = :id ORDER BY date DESC");
$title_select_query ->execute(array(':id' => $id));
$title_select_query_result = $title_select_query->fetchColumn(); 
echo($title_select_query_result);

$title_select_query_result = $title_select_query->fetchColumn(); 
echo($title_select_query_result);

$title_select_query_result = $title_select_query->fetchColumn(); 
echo($title_select_query_result);

$title_select_query_result = $title_select_query->fetchColumn(); 
echo($title_select_query_result);

$title_select_query_result = $title_select_query->fetchColumn(); 
echo($title_select_query_result);

?>
4b9b3361

ОТВЕТЫ

Ответ 1

Поскольку вы заменяете содержимое $('# posts'), высота документа не изменяется после первого запроса ajax на scroll = > , поэтому вам нужно прокручивать вверх, а затем прокручивать вниз, чтобы вызвать другой запрос ajax. Поскольку я не знаю ожидаемого макета страницы, я дам простое базовое демо HTML JSFiddle demo

<div id="main" style="height:200px; overflow-y : auto;">
    <div id="posts">
    </div>
</div>

Javascript

var loadmoore = true,
    loaded_posts =0 ;
function gent_sample_data(num_posts){
    var i,
        sample_data = '';
    for(i=0;i<num_posts;i++) {
        sample_data += "<p class'post'>title_select_query_result " + (loaded_posts + i) + "</p>"; 
    }
    return sample_data;
}

function loadFeed(){
     // generate sample data
    var sample_data = gent_sample_data(15);
    loaded_posts = loaded_posts + 15;
    $.ajax({
        url : '/echo/html/',
        dataType: 'html',
        type: 'post',
        data: {'html':sample_data},
        success: function(returnhtml){
            console.log(returnhtml);
             // option 1 - add result into "havanaglia" div
            // var $post = $('<div class="havanagila"></div>');
            // $post.html(returnhtml);
            // $("#posts").append($post);

            // option 2 - ad result after "havanaglia" div
            $("#posts").append('<div class="havanagila"></div>');
            $("#posts").append(returnhtml); 
            loadmoore = true;
        }    
    });
}
loadFeed();

$("#main").scroll(function () { 
    if (loadmoore && $("main").scrollTop() >= ($("main").height()-100) ) {
       loadmoore = false;
       loadFeed();
    }
});

В вашем случае я предлагаю использовать что-то вроде этого:

var loadmoore= true;
function loadFeed() {
    $.ajax({
        url: 'loadmore.php',
        dataType: 'html',
        success: function (data) {
            var $havanaglia = $('<div class="havanagila"></div>');
            $havanaglia.html(data);
            $("#posts").append($havanaglia);
            loadmoore = true;
        }
    });
}

loadFeed();

$(window).scroll(function () { 
    if (loadmoore && $(window).scrollTop() >= $(document).height() - $(window).height()-100) {
        loadmoore= false;
       loadFeed();
    }
});

Чтобы предотвратить получение одинаковых сообщений из базы данных, я рекомендую отправить php идентификатор/номер последнего загруженного сообщения, чтобы получить сообщения с номером id/number > last loaded post

Ответ 2

Если вы хотите загрузить функцию AJAX для каждого события прокрутки, нет необходимости проверять условие if. просто напишите..

$(window).scroll(function(){
        loadFeed();
});

и если вы хотите вызвать функцию AJAX, если свиток достиг дна, вам необходимо проверить условие, подобное...

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){
        loadFeed();
    }
});

Ответ 3

измените loadFeed() funtion на

function loadFeed() {
    $.ajax({
        url: 'loadmore.php',
        dataType: 'html',
        success: function (data) {
            $("#posts").append('<div class="havanagila"></div>');
            $('#posts').html($('#posts').html()+data);
        }
    });
}

это изменение, которое вы должны сделать $('#posts').html($('#posts').html()+data);

Ответ 4

Если я правильно помню, у меня была одна и та же проблема для чего-то подобного. То, что я сделал, это остановить слушателя прокрутки и перезапустить его с успехом AJAX.

Вот код, который может вам помочь:

function loadFeed() {
    $.ajax({
        url: 'loadmore.php',
        dataType: 'html',
        success: function (data) {
            $("#posts").append('<div class="havanagila"></div>');
            $('#posts').html(data);
            $(window).on('scroll', function() {checkScroll()}); // Run the function again upon success
        }
    });
}

var checkScroll = function() {
  if ($('#SomeElementAlwaysAtTheBottomOfThePage')[0]) {
    var el = $('#SomeElementAlwaysAtTheBottomOfThePage');
    var bottom_of_object = el.offset().top + el.outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    if (bottom_of_window >= bottom_of_object) { // If we're at the bottom...
      $(window).unbind('scroll'); // Stop the scroll function
      loadFeed(); // Load the AJAX
    }
  }
}

$(window).on('scroll', function() {checkScroll()}); // Start the function off
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="posts"></div>
<div id="SomeElementAlwaysAtTheBottomOfThePage"></div>

Ответ 5

Похоже, вы перезаписали внутреннее содержимое элемента #posts функцией html(). $("#posts").append('<div class="havanagila"></div>'); $('#posts').html(data);

Я думаю, ты хочешь $("#posts").append($('<div class="havanagila"></div>').html(data));

И ваш оператор IF if ((windowScroll + windowHeight) == documentHeight), ваша функция ajax вызывается только в том случае, если вы прокручиваете верхнюю часть страницы (в Chrome).

Ответ 6

Следующий код javascript используется для загрузки 4 записей, когда полоса прокрутки попадает в нижней части экрана. Это означает, что при первом появлении 4 записи будут получены, во второй раз следующие 4 записи будут выбраны, и все эти записи будут отображаться на экране. Этот код помогает нам уменьшить задержку загрузки при загрузке страницы.

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       //alert("bottom!");
       loadNext();
   }
});
var n1=0;
var n2=4;

function loadFirst()
{
    var n1=0;
    var n2=4;   
}
function loadNext()
{
    n1=n1+4;
    n2=n2+4;
    //alert(n1);    
    //alert(n2);
    if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("testidiv").innerHTML=document.getElementById("testidiv").innerHTML+xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","next_testimonial_action.php?a=" + n1 + "&b=" + n2,true);
xmlhttp.send();

}


</script>

"next_testimonial_action.php? a =" + n1 + "& b =" + n2 "- это php-страница, содержащая логику для извлечения данных из db, а n1, n2 - предел записываемых записей. Если вам нужен файл php, который вы можете запросить в качестве комментария. Спасибо

---- Важно ---- "Вы должны вызвать функцию loadFirst() в bodyOnload или document.ready() jquery"

Ответ 7

Все хорошо выглядит для меня,

Просто измените $(window).scroll(function () {...... на

$(document).on( 'scroll','window', function(){
              //or $(document).on( 'scroll','id of div containing scroll',
   var windowScroll = $(window).scrollTop();
   var windowHeight = $(window).height();
   var documentHeight = $(document).height();

    if ((windowScroll + windowHeight) == documentHeight) {
         loadFeed();
       }
});

Ответ 8

function loadFeed() {
    $.ajax({
        url: 'loadmore.php',
        dataType: 'html',
        success: function (data) {
            $("#posts").append('<div class="havanagila"></div>');
            $('#posts').html(data);
            $(window).on('scroll', function() {checkScroll()}); // Run the function again upon success
        }
    });
}

var checkScroll = function() {
  if ($('#SomeElementAlwaysAtTheBottomOfThePage')[0]) {
    var el = $('#SomeElementAlwaysAtTheBottomOfThePage');
    var bottom_of_object = el.offset().top + el.outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    if (bottom_of_window >= bottom_of_object) { // If we're at the bottom...
      $(window).unbind('scroll'); // Stop the scroll function
      loadFeed(); // Load the AJAX
    }
  }
}

$(window).on('scroll', function() {checkScroll()}); // Start the function off
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="posts"></div>
<div id="SomeElementAlwaysAtTheBottomOfThePage"></div>