在滾動頁面加載更多不加載頁面2

Question

我仍然堅持這一點，所以很抱歉，這個重疊的問題。 我試圖創建一個產品頁面，從第一頁加載產品。用戶向下滾動第二頁中的產品時需要加載。我搜索了這個Q &一個網站和許多教程，但我無法得到這個工作。

shop.com/category/page1.ajax的產品已正確加載，但向下滾動時，我不知道爲什麼shop.com/category/page2.ajax等產品未加載。

像無限滾動插件不是一個選項。

任何幫助非常感謝。

的JSON/Ajax的字符串（因爲長度的精縮）：

{ 
"page": 1, 
"pages": 7, 
"count": 42, 
"url": "http:\/\/meules1.webshopapp.com\/woonkamer-en-keuken\/", 
"products": [ 
    { 
     "id": 1750137, 
     "vid": 2765003, 
     "image": "http:\/\/cdn.webshopapp.com\/i\/z1faly\/50x50x2\/newc.jpg", 
     "image_id": 2156769, 
     "brand": false, 
     "code": "40-95407", 
     "ean": "40-95407", 
     "sku": "", 
     "score": false, 
     "price": { 
      "price": 65, 
      "price_money": "\u20ac65,00", 
      "price_money_with_currency": "\u20ac65,00 EUR", 
      "price_money_without_currency": "65,00", 
      "price_excl": 54.6218, 
      "price_excl_money": "\u20ac54,62", 
      "price_excl_money_with_currency": "\u20ac54,62 EUR", 
      "price_excl_money_without_currency": "54,62", 
      "price_incl": 65, 
      "price_incl_money": "\u20ac65,00", 
      "price_incl_money_with_currency": "\u20ac65,00 EUR", 
      "price_incl_money_without_currency": "65,00", 
      "price_old": 109, 
      "price_old_money": "\u20ac109,00", 
      "price_old_money_with_currency": "\u20ac109,00 EUR", 
      "price_old_money_without_currency": "109,00", 
      "price_old_excl": 91.5966, 
      "price_old_excl_money": "\u20ac91,60", 
      "price_old_excl_money_with_currency": "\u20ac91,60 EUR", 
      "price_old_excl_money_without_currency": "91,60", 
      "price_old_incl": 109, 
      "price_old_incl_money": "\u20ac109,00", 
      "price_old_incl_money_with_currency": "\u20ac109,00 EUR", 
      "price_old_incl_money_without_currency": "109,00" 
     }, 
     "available": true, 
     "url": "http:\/\/meules1.webshopapp.com\/newc.html", 
     "title": "Newc", 
     "fulltitle": "Newc", 
     "variant": "", 
     "description": "In de serie Newcastle bieden wij nu ook dit TV meubel \/ salontafel aan. Deze", 
     "data_01": "" 
    }, 
    { 
     "id": 1750135, 
     "vid": 2765001, 
     "image": "http:\/\/cdn.webshopapp.com\/i\/z1falp\/50x50x2\/utrecht.jpg", 
     "image_id": 2156760, 
     "brand": false, 
     "code": "nov-89", 
     "ean": "nov-89", 
     "sku": "", 
     "score": false, 
     "price": { 
      "price": 47.5, 
      "price_money": "\u20ac47,50", 
      "price_money_with_currency": "\u20ac47,50 EUR", 
      "price_money_without_currency": "47,50", 
      "price_excl": 39.916, 
      "price_excl_money": "\u20ac39,92", 
      "price_excl_money_with_currency": "\u20ac39,92 EUR", 
      "price_excl_money_without_currency": "39,92", 
      "price_incl": 47.5, 
      "price_incl_money": "\u20ac47,50", 
      "price_incl_money_with_currency": "\u20ac47,50 EUR", 
      "price_incl_money_without_currency": "47,50", 
      "price_old": 65, 
      "price_old_money": "\u20ac65,00", 
      "price_old_money_with_currency": "\u20ac65,00 EUR", 
      "price_old_money_without_currency": "65,00", 
      "price_old_excl": 54.6218, 
      "price_old_excl_money": "\u20ac54,62", 
      "price_old_excl_money_with_currency": "\u20ac54,62 } 

jQuery的：

<script type="text/javascript"> 
$(document).ready(function(){ 

// var pageSize = {{ collection.limit }}; 
var currentPage = {{ collection.page }}; 
var collectionPages = {{ collection.pages }}; 
var category = '{{ collection.internal.url }}'; 

// Appends the new product to the UI 
var appendProduct = function(product, id) { 
$('<div class="product"></div>') 
.html(product) 
.appendTo($(".productsGrid")); 
}; 

// Load the next products 
var loadProducts = function() { 

var url = "http://shop.com/"+category+"/page"+currentPage+".ajax"; 

$.getJSON(url,function(data) { 

    console.log(data); 
    $.each(data.products, function(index, product) { 
    appendProduct('<a href="'+product.url+'" title="'+product.fulltitle+'">' + 
        '<img src="'+product.image+'" width="180" height="150" alt="'+product.fulltitle+'" title="'+product.fulltitle+'"'+'</a>' + 
        '<div class="info"><h3><a href="'+product.url+'" title="'+product.fulltitle+'">'+product.fulltitle+''+'</a></h3>' + 
        '<div class="price">'+product.price.price_money+''+'</div>' + 
        '<div class="gridAddToCart"><a class="button grey" href="'+product.url+'" title="'+product.fulltitle+'" rel="nofollow">'+'<span>{{ 'Details' | t }}</span></a>' + 
        '<div style="margin-top:2px;"></div>' + 
        '<a class="opener button blue" href="http://shop.com/cart/add/'+product.vid+'" title="'+product.fulltitle+'" rel="nofollow"><span>{{ 'Add to cart' | t }}</span></a>' 
       + '<div class="clear"></div>' + 
        '</div><div class="clear"></div></div>'  
    ); 
    }); 

    // We're done loading the products, so hide the overlay and update the UI 
    $("#overlay").fadeOut(); 
}); 
}; 

// First time, directly load the products 
loadProducts(); 

// Append a scroll event handler to the container 
$(".productsGrid").scroll(function() { 
// We check if we're at the bottom of the scrollcontainer 
if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) { 
    // If we're at the bottom, show the overlay and retrieve the next page 

    currentPage++; 

    $("#overlay").fadeIn(); 
    loadProducts(); 
} 
}); 

}); 
</script> 

Answer 1

也許scroll功能在不觸發該選定元素productsGrid。你會檢查一下警報嗎？ productsGrid是否有滾動條，還是隻是整個頁面的一部分？你可以嘗試一個更通用的方法對整個文檔：

在getJSON，

// We're done loading the products, so hide the overlay and update the UI 
     $("#overlay").fadeOut(); 
     $(window).scroll(function() { update(); }); // <-- ADD THIS LINE 
    }); 
    }; 

// First time, directly load the products 
loadProducts(); 

var update = function() { // <-- NAME THIS AS FUNCTION 
    // activate loadProducts when scrollbar reaches 150 pixels or less from the 
    // bottom, instead of having scrolled exactly all the way to the end. 
    if($(window).height() + $(window).scrollTop() >= $(document).height() - 150) { 

    if(currentPage < collectionPages) { 
     // If we're at the bottom, show the overlay and retrieve the next page  
     currentPage++; 
     $("#overlay").fadeIn(); 
     $(window).unbind('scroll'); // <-- ADD THIS LINE 
     loadProducts(); 
    } 
    } 
}; 

$(window).scroll(function() { update(); }); // <-- ADD THIS LINE