Lazy Load - Browser Back Button Issue - Hidden Field Does Not Change

时间:2015-06-15 15:01:17

标签: php jquery ajax laravel

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);
}   

0 个答案:

没有答案