Infinite scrolling problem using jQuery and ajax. Two questions ...

[FarrisFahad]

I am trying to build a scrolling system for my website. This is what I have com up with ...

$.ajaxSetup({ cache: false });

    $(window).scroll(function(){

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

        picturesCount = $(".Picture-1A").length;
        allPicturesCount = $("#allPicturesCount").text();

        alert('picturesloaded:' + picturesCount + ' PicturesDB: ' + allPicturesCount)

        if(picturesCount < allPicturesCount){

            $.post('ajax/load-latest-pictures.php', {pictures_loaded:picturesCount},  function(data){

                if(data){
                    $("#loadMore").append(data);
                }

            });

        }else{
            $("#loadMore").append("<center>There are no pictures.</center>");
            return;
        }

        }
    });

I am having problem when all the pictures have been appended and there is nothing left. The problem is every time I get to the bottom of the page 'There are no pictures.' get appended more than once. How can I append it once? Try it on your browser and tell me what you think.

The second question is that I am having problems with IE, all versions. Evertime I get to the bottom and I have pictures left it loads it more than once. I searched for an answer and all I got was that IE have problems with cache. So I added the $.ajaxSetup cache option to false. But the problem still exist.

[hericles]

Your function gets called every time there is a scroll event, so at the bottom of the page, with no more pictures to display, it has no choice to respond with "There are no pictures."
Add a variable and set it to true when you reach the "no pictures point". Then check if that variable is false at the start of the scroll event before proceeding.
Can't help with the IE thing...

[FarrisFahad]

It worked thanks a lot for the help ...
For people who want to take a look at the code after fixes, here you go ...

$.ajaxSetup({ cache: false });

    endPictures = true;

    $(window).scroll(function(){



        if(endPictures == true){

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

        picturesCount = $(".Picture-1A").length;
        allPicturesCount = $("#allPicturesCount").text();

        alert('picturesloaded:' + picturesCount + ' PicturesDB: ' + allPicturesCount)

            $.post('ajax/load-latest-pictures.php', {pictures_loaded:picturesCount},  function(data){

                if(data){
                    $("#loadMore").append(data);
                }else{
                    $("#loadMore").append("<center>There are no pictures.</center>");
                    endPictures = false;
                }
            });
        }

        }
    });

[FarrisFahad]

Does anyone have an answer to the second question?

[Nikolayzah]

$.ajaxSetup({ cache: false });
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
        picturesCount = $(".Picture-1A").length;
        allPicturesCount = $("#allPicturesCount").text();
        allPicturesCount = parseInt(allPicturesCount);
        alert('picturesloaded:' + picturesCount + ' PicturesDB: ' + allPicturesCount)
        if(picturesCount < allPicturesCount){
            $.post('ajax/load-latest-pictures.php', {pictures_loaded:picturesCount},  function(data){
                if(data){
                    $("#loadMore").append(data);
                }
            });
        }else{
            $("#loadMore").append("<center>There are no pictures.</center>");
            return;
        }
        }
    });

[Nikolayzah]

solution for appending text once

[FarrisFahad]

I have found the solution. The problem was that the .scroll method loop through $(window).height() part more than once. So all I had to do it this ...

<script>
$(document).ready(function(){

    $.ajaxSetup({ cache: false });

    endPictures = true;

    scrollCount = 0;

    $(window).scroll(function(){

        if(endPictures == true){

        if(scrollCount == 0){

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

            scrollCount = 1;

            picturesCount = $(".Picture-1A").length;

                $.post('ajax/load-latest.php', {off_set:picturesCount},  function(data){
                    if(data){
                        $("#loadMore").append(data);
                        scrollCount = 0;
                    }else{
                        $("#loadMore").append("<div class=\"NoMorePictures\"><center>There are no pictures left.</center></div><br/ >")
                        endPictures = false;
                        scrollCount = 0;
                    }
                });

            }

        }

        }
    });

});
</script>