programing

스크롤로 AJAX 기능이 작동하지 않습니다.

megabox 2023. 9. 1. 20:42
반응형

스크롤로 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

'programing'의 다른글

  • 현재글스크롤로 AJAX 기능이 작동하지 않습니다.

관련글

댓글

티스토리툴바