La funzione AJAX non funziona con lo scorrimento

Question

Utilizzo di AJAX per lo scorrimento continuo. Il contenuto viene caricato solo la prima volta, ma non viene caricato con lo scorrimento.

Cosa c'è che non va?

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); 

?> 

Answer 1

Se si desidera caricare AJAX funzione per ogni evento di scorrimento non c'è bisogno di controllare if condizione. è sufficiente scrivere ..

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

e se si desidera chiamare la funzione AJAX se il rotolo ha raggiunto il fondo si controlla condizione come ...

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

Answer 2

Perché si sostituisce il contenuto di $ ('#posts'), l'altezza del documento non cambia dopo la prima richiesta di ajax su scroll =>, quindi è necessario scorrere verso l'alto, quindi scorrere di nuovo verso il basso per attivare un'altra richiesta Ajax. Perché io non conosco il layout di pagina previsto, darò una semplice demo di base HTMLJSFiddle 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(); 
    } 
}); 

Per il vostro caso suggerisco di usare qualcosa di simile this:

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(); 
    } 
}); 

Per evitare di ottenere gli stessi messaggi dal database, consiglio di inviare a php l'id/numero dell'ultimo post caricato per ottenere post con id/numero> ultimo post caricato

Answer 3

Se ricordo bene, stavo soffrendo dello stesso problema per qualcosa di simile. Quello che ho fatto è stato fermare il listener di scroll e riavviarlo dopo il successo di AJAX.

Ecco il codice che potrebbe aiutare:

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>

Answer 4

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>

Answer 5

cambiamento che loadFeed() funtion a questo

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

questo è il cambiamento che dovete fare $('#posts').html($('#posts').html()+data);

Answer 6

Sembra che si sovrascritto il contenuto interno dell'elemento #posts da html() funzione. $("#posts").append('<div class="havanagila"></div>'); $('#posts').html(data);

Penso che si desidera $("#posts").append($('<div class="havanagila"></div>').html(data));

E sulla tua istruzione IF if ((windowScroll + windowHeight) == documentHeight), la funzione ajax viene chiamato solo se si scorre dall'alto verso il basso della pagina (su Chrome).

Answer 7

Il seguente codice javascript viene utilizzato per caricare 4 record quando si colpisce la barra di scorrimento nella parte inferiore dello schermo. Ciò significa quando verranno recuperati per la prima volta 4 record, la seconda volta i prossimi 4 record recuperati e questi tutti i record verranno visualizzati sullo schermo. Questo codice ci aiuta a ridurre il ritardo di caricamento in fase di caricamento della pagina.

$(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" è la pagina PHP che contiene la logica per il recupero dei dati dal db, e n1, n2 sono il limite dei record da recuperare Se è necessario il file php, è possibile richiedere un commento Grazie

---- Importante ---- "È necessario chiamare la funzione loadFirst() su bodyOnload o document.ready () jquery "

Answer 8

Tutto mi sembra perfetto,

Basta cambiare $(window).scroll(function() {...... a

$(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(); 
     } 
});