스크롤로 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();
}
});
적재량을 늘립니다.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);
?>
$('#jax')의 내용을 바꾸기 때문에 스크롤 =>에서 첫 번째 Ajax 요청 후에도 문서의 높이가 변경되지 않으므로 위로 스크롤한 다음 다시 아래로 스크롤하여 다른 Ajax 요청을 트리거해야 합니다.예상 페이지 레이아웃을 모르기 때문에 간단한 기본 데모 HTML JSFidle 데모를 드리겠습니다.
<div id="main" style="height:200px; overflow-y : auto;">
<div id="posts">
</div>
</div>
자바스크립트
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를 얻기 위해 id/number > last loaded post를 보내는 것을 추천합니다.
로드하려는 경우AJAX
각 스크롤 이벤트에 대한 기능을 확인할 필요가 없습니다.if
조건.간단히 쓰시오..
$(window).scroll(function(){
loadFeed();
});
그리고 만약 당신이 전화하고 싶다면.AJAX
스크롤이 하단에 도달한 경우...와 같은 상태를 확인해야 합니다.
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
loadFeed();
}
});
체인지 유loadFeed()
이것에 대한 기능
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);
제 기억이 맞다면 저는 비슷한 문제로 같은 문제를 겪고 있었습니다.제가 한 일은 스크롤 청취기를 중지하고 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>
요소의 내부 내용을 덮어쓴 것 같습니다.#posts
타고html()
기능.$("#posts").append('<div class="havanagila"></div>'); $('#posts').html(data);
당신이 원하는 것 같습니다.$("#posts").append($('<div class="havanagila"></div>').html(data));
그리고 당신의 IF 문에 대해서도.if ((windowScroll + windowHeight) == documentHeight)
당신의 아약스 함수는 당신이 페이지의 위쪽에서 아래쪽으로 스크롤할 때만 호출됩니다.
아래 자바스크립트 코드는 스크롤 바가 화면 하단에 왔을 때 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_intervalonial_action.http?a=" + n1 + "&b=" + n2"는 db에서 데이터를 가져오기 위한 로직을 포함하는 php 페이지이며, n1,n2는 가져올 레코드의 한계입니다.만약 당신이 php 파일이 필요하다면 코멘트로 요청할 수 있습니다.감사해요.
중요---- "bodyOnload 또는 document.ready() jquery에서 loadFirst() 함수를 호출해야 합니다."
내 눈에는 모든 것이 괜찮아 보입니다.
체인지$(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>
언급URL : https://stackoverflow.com/questions/30001920/ajax-function-is-not-working-by-scroll
'programing' 카테고리의 다른 글
-fno-stack-protector의 용도는 무엇입니까? (0) | 2023.09.01 |
---|---|
새 DB가 훨씬 느림 (0) | 2023.09.01 |
Ajax 처리에 "잘못된 JSON 기본값"이(가) 있습니다. (0) | 2023.09.01 |
IIS URL 다시 쓰기 vs URL 라우팅 (0) | 2023.09.01 |
괄호 안의 숫자는 정말 무엇을 의미합니까? (0) | 2023.09.01 |