La fonction AJAX ne fonctionne pas par scroll
en utilisant AJAX fin de défilement. Le contenu ne charge que la première fois, mais ne charge pas par scroll.
Quel est le problème?
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);
?>
8 réponses
parce que vous remplacez le contenu de $('#posts'), la hauteur du document ne change pas après la première demande ajax sur scroll => donc vous devez faire défiler vers le haut , puis faire défiler vers le bas à nouveau pour déclencher une autre demande ajax. Parce que je ne connais pas la mise en page attendue, je vais donner une simple démo de 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();
}
});
pour votre cas, je suggère d'utiliser quelque chose comme ceci:
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();
}
});
pour empêcher d'obtenir les mêmes postes à partir de la base de données, je recommande d'Envoyer à php l'id / le nombre du dernier poste chargé pour obtenir des postes avec l'id / le nombre > dernier poste chargé
si vous voulez charger AJAX fonction pour chaque événement scroll, il n'est pas nécessaire de vérifier if condition. simplement écrire..
$(window).scroll(function(){
loadFeed();
});
et si vous voulez appeler le AJAX fonction si le rouleau a atteint le bas, vous devez vérifier l'état comme...
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
loadFeed();
}
});
changement que vous loadFeed() fonction de ce
function loadFeed() {
$.ajax({
url: 'loadmore.php',
dataType: 'html',
success: function (data) {
$("#posts").append('<div class="havanagila"></div>');
$('#posts').html($('#posts').html()+data);
}
});
}
c'est le changement que vous avez à faire $('#posts').html($('#posts').html()+data);
si je me souviens bien, je souffrais du même problème pour quelque chose de semblable. Ce que j'ai fait était d'arrêter l'écouteur de parchemin et de le redémarrer après le succès D'AJAX.
voici le code qui pourrait vous aider:
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>Il semble que vous écrasait le contenu intérieur de l'élément #posts par html() fonction.
$("#posts").append('<div class="havanagila"></div>');
$('#posts').html(data);
je pense que vous voulez
$("#posts").append($('<div class="havanagila"></div>').html(data));
et à propos de votre déclaration si if ((windowScroll + windowHeight) == documentHeight), votre fonction ajax est appelée seulement si vous faites défiler du haut vers le bas de la page (sur Chrome).
Le code javascript suivant est utilisé pour charger 4 enregistrements lorsque la barre de défilement frappé au bas de l'écran. Cela signifie que lorsque la première fois 4 enregistrements seront récupérés, la deuxième fois 4 enregistrements seront récupérés et ces tous les enregistrements seront affichés sur l'écran. Ce code nous aide à réduire le délai de chargement au moment du chargement de la page.
$(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.le php?a= " + n1 + "&b= "+ n2" est la page php qui contient la logique pour récupérer les données de db, et n1, n2 sont la limite les enregistrements pour être récupérée. Si vous avez besoin du fichier php, vous pouvez demander un commentaire. Je vous remercie
- - - - Important - - - - "vous devez appeler la fonction loadFirst () à bodyOnload ou document.prêt() jquery"
le Tout bien pour moi,
Il Suffit De Changer $(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();
}
});
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>