I am developing a laravel website, in which there is a product list page (List page) where I show all the products with ajax lazy load. I also have a Product Details page which show details of the individual product. I created a hidden field which saves scroll count
I call this field as Page_No
field. When I go to list page, Initially I show 6 products from database and also set Page_No
to "0", after I scroll down, another 6 products gets added to list by ajax and by determining Page_No
field and that time I increment the Page_No
field by one. And so on.
When I scroll down for some time (say three times) that means I have 24 products on my list page, and my Page_No
count is "3". After that I click on any product and go to product page to see details. After that when I click browser's back button and go to list page, I see first 6 products are there and then if I scroll down I get more products, but it skips some of the products (for ex it shows me 45th product and so on..so what about those product from 24-45?).
My understanding:
When I get back to list page by clicking browser's back button Page_NO
field is set to 3, if I scroll down it gets incremented by one i.e. "4", So my ajax query executes and get result from that point skipping some products.
Things I tried:
I understood that I have to control Page_No
field in order to get my list work properly after pressing back button. when I go to product details page by clicking any one product that time I creates a session which will have value "0". After that I created SetInterval
Ajax function which will continuously check that session and update the Page_No
field. But this thing also does not work properly (Only works for first instance).
lazyload.js
onscroll = doLazyLoad;
//global check flag for do lazy load
var ll_check_flag = true;
function doLazyLoad()
{
var productsDiv = document.getElementById('ProductsView');
if(window.scrollY > (productsDiv.scrollHeight - 200))
{
if(ll_check_flag)
{
ll_check_flag = false;
getMoreProducts();
}
}
}
function getMoreProducts()
{
var product_filters = [];
$('input.checkfilter:checkbox:checked').each(function ()
{
product_filters.push($(this).val());
});
var pageno = parseInt($('#pageNo').val())+1;
$('#pageNo').val(pageno);
var range_filter = $('#range').val();
productsLazyLoadAjax(product_filters,range_filter,'',pageno);
}
function productsLazyLoadAjax(product_filters,range_filter,search_term,pageno)
{
weburl = $('#MasterURL').val();
$.ajax({
url: weburl + '/index/get/products',
type: "POST",
data: {pf:product_filters,rf:range_filter,st:search_term,page:pageno},
beforeSend:function()
{
res.container.append(res.loader);
},
success: function(data)
{
if(data != 0)
{
res.container.find(res.loader).remove();
$('#ProductsView').append(data);
ll_check_flag = true;
}
},
complete: function() {
}
});
}
Product Detail Page (After click on list page products we land on product detail page)
jQuery(document).ready(function()
{
$('#pageNo').val(0);
}