JQuery 게시 메서드가 실행되지 않습니다.

Question

이전에 Ajax를 작성한 적이 없으며 현재 무한 스크롤 페이지를 코딩하려고합니다. 사용자가 페이지 아래쪽으로 스크롤하면 더 많은 항목이로드되지만 현재로드되지 않습니다. 경고는 내가 바닥을 쳤을 때 표시되며,

window.onload=function(){ 
//Find out how many items I have loaded and what filter I am using so I can make the Ajax call 
var vloaded = <?php echo $i; ?>; 
var vfilter = "<?php echo $filter ?>"; 
$(window).on('scroll', function() { 
    if ($(window).height() + $(window).scrollTop() >= $(document).height() - 10) { 
    //I have reached the bottom of the page, now load items 
    alert("loaded is " + vloaded + " and filter is " + vfilter); 
    $.post("/organizer/getMore", 
     { filter: vfilter, loaded: vloaded }, 
       function(responseText) { 
        $("grid").append(responseText); 
       },"html"); 
    //I've loaded the next 30 items, increment my counter for next time 
    vloaded +=30; 
    } 
}); 
} 

내 변수가 올바르게 증가한다 : 여기가 바닥을 쳤을 때 감지하고 Ajax 호출을 내 자바 스크립트입니다. 나는 젠드 프레임 워크를 사용하고, 그래서 여기 내 getMoreAction() 함수에 URL 포인트 : 나는 또한 페이지가 처음로드를 사용하고 있기 때문에

public function getmoreAction() 
{ 
//Used by Ajax to get more items for the infinite scroll 
    //Figure out how I'm filtering items and how many I've already loaded 
    $filter = $_POST['filter']; 
    $loaded = $_POST['loaded']; 
    echo "Filter is ".$filter; 
    echo "Loaded ".$loaded; 
    //Get all the items in the database ordered by filter 
    require_once(APPLICATION_PATH . '/models/ItemArray.php'); 
    $items = ItemArray::getItems($user->getID(), $filter, $loaded); 
    //Return items back to Ajax call, converted to html 
    echoItems($items); 
} 

나는 이미 getItems 기능이 작동 알고, echoItems 단지입니다 루프는 다른 항목에서도 작동하는 각 항목에 대한 html을 표시합니다. 액션의 에코는 절대로 실행되지 않습니다. 그래서 나는 포스트 콜에 문제가 있다고 가정하고 있습니다.

Answer 1

제안 사항.

1. window.onload 속성 대신 $(document).ready() jQuery 함수를 사용하십시오. 난 그냥 내가 더 쉽게 읽을 수 리팩토링
는 $.post()

대신 jQuery를 기능 $.ajax()를 사용합니다.

// put these in the global scope 
var vloaded = <?php echo $i; ?>; 
var vfilter = "<?php echo $filter ?>"; 

$(document).ready() 
{ 

    // I forgot to leave this in 
    $(window).on('scroll', function() 
    { 
     var height = $(window).height(); 
     var scrollTop = $(window).scrollTop(); 
     var dHeight = $(document).height(); 

     if(height + scrollTop >= dHeight - 10) 
     { 
      alert("loaded is " + vloaded + " and filter is " + vfilter); 

      // an AJAX request instead of a POST request 
      $.ajax 
      (
      { 
       type: "POST", 
       url: "/organizer/getMore", 
       data: { filter: vfilter, loaded: vloaded }, 
       dataType: "html", 
       success: function(responseText, textStatus, XHR) 
       { 
       // select the element with the ID grid and insert the HTML 
       $("#grid").html(responseText); 
       } 
      } 
     ); 

      // global variable 
      vloaded +=30; 

     } // if 
    } 

); // on 

} // ready