javascript - Execute ajax when html element visible on user screen - Stack Overflow

I have this script which makes ajax request when user reaches the end of the page. It is based on scroll event. At page load I am showing only 16 products on the user screen and when he scrolls down I wish to load another 16 products. My script is working but it executes more than one ajax request which is not what I want. The idea is just to show another set of 16 products. The script is:

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() > $('.made').offset().top) {
        //here I count how many products I have shown already   
        var productsshown = $(".productcell").length;
        $('.made').hide();
        $.ajax({
            type: "post",
            url: "./ajax/get_more_products.php",
            data: {
                "product": productsshown
            },
            dataType: 'json',
            cache: false,
            success: function(data) {
                $("#bcontent").html(data);
                $('.made').show();
            }
        });
    }
});

As you can see I have a div which I am using as controler and when user see this div - the ajax is being executed. The result from ajax is being loaed into another div with id="content"

How to avoid scroll event to execute the ajax call more than once? I tried by hiding my controller div .made and upon ajax responce I am showing it again so it can be executed for another 16 products when user goes down to it again.. but ajax is always called executed more than once as I want it..

I have this script which makes ajax request when user reaches the end of the page. It is based on scroll event. At page load I am showing only 16 products on the user screen and when he scrolls down I wish to load another 16 products. My script is working but it executes more than one ajax request which is not what I want. The idea is just to show another set of 16 products. The script is:

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() > $('.made').offset().top) {
        //here I count how many products I have shown already   
        var productsshown = $(".productcell").length;
        $('.made').hide();
        $.ajax({
            type: "post",
            url: "./ajax/get_more_products.php",
            data: {
                "product": productsshown
            },
            dataType: 'json',
            cache: false,
            success: function(data) {
                $("#bcontent").html(data);
                $('.made').show();
            }
        });
    }
});

As you can see I have a div which I am using as controler and when user see this div - the ajax is being executed. The result from ajax is being loaed into another div with id="content"

How to avoid scroll event to execute the ajax call more than once? I tried by hiding my controller div .made and upon ajax responce I am showing it again so it can be executed for another 16 products when user goes down to it again.. but ajax is always called executed more than once as I want it..

• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited May 11, 2015 at 13:09 Nizam 4,69933 gold badges4444 silver badges6363 bronze badges asked May 11, 2015 at 12:47 EuropeuserEuropeuser 94211 gold badge1010 silver badges3535 bronze badges 5

• 2 Your URL is not a string...: url: ./ajax/get_more_products.php", (missing opening quote). Please fix your errors. – Mr. Polywhirl Commented May 11, 2015 at 12:49
• Sorry, copy/paste mistake, I will fix it – Europeuser Commented May 11, 2015 at 12:50
• heh, always check your code on quotations... dont copy paste everything blindly and asume it's correct. For your main question, set up an variable with a number, and whenever you run it, trigger it. whenever the item is higher, make it so the if statement cant get there. – Dorvalla Commented May 11, 2015 at 12:51
• You disable the scroll event until first ajax is plete and its content added. – Salman Arshad Commented May 11, 2015 at 12:57
• Salman A, can you provide a sample code please? I think this will work out.. – Europeuser Commented May 11, 2015 at 13:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

hmm, Here is a small addition to your code, adding a flag swiched whenever you load more items:

var _itemsLoading = false;
if ((!_itemsLoading) && ($(window).scrollTop() + $(window).height() > $('.made').offset().top)) {
    //here I count how many products I have shown already   
    var productsshown = $(".productcell").length;
    $('.made').hide();
    _itemsLoading = true;
    $.ajax({
        type: "post",
        url: "./ajax/get_more_products.php",
        data: {
            "product": productsshown
        },
        dataType: 'json',
        cache: false,
        success: function(data) {
            $("#bcontent").html(data);
            $('.made').show();
            _itemsLoading = false;
        }
    });
}

Simple store the timestamp then you fire your ajax request and reset it then it returns or after 2 seconds.... then the timestamp is set don't fire your requests.

I don't handle the scroll event. I use setInterval() and I test if the position has changed since previous tic.

I just replaced

if ($(window).scrollTop() + $(window).height() > $('.made').offset().top) {

with:

if($(window).scrollTop() + $(window).height() == $(document).height()){

and used the page bottom as ajax controller.. It works now, thanks !