ajax not keeping variable up to date

[dwlamb]

I have an endless scroll application in PHP and jQuery. This my javascript:

    var base_url    = window.location.origin;
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
        var offset  = $(".badge-item").length;
        console.log(offset);
        $.ajax({
            url         : base_url+'/index.php/display/jQuery_movies',
            type        : "post",
            data        :  { offset_cnt : offset },
            datatype    : 'html',
            success     : function(response){
                $("#badgesWrapper").append(response);
                offset  = offset+12;
            },
            error       :function(){
              alert("failure");
              $("#result").append('Error Occurred while fetching data.');
            }
        }); 

        }
    });

This is my php (using CodeIngiter):

function jQuery_movies(){
    $this->load->model('Model_display');
    $offset         = $this->input->post('offset_cnt',TRUE);
    $result         = $this->Model_display->fetch_movies($offset,$limit=12,$method='ajax');
    echo $result;       
}

As designed, the objective is to count the number of occurences of a class $(".badge-item") and use that information to determine the offset for querying the database. The php loads initially loads a page of 12 badge-items when the user first hits the page. As the user scrolls down and gets close to the end another 12 badge-items should load. All is working fine except for the value of offset not updating properly. Batches of 12 are being loaded twice, sometimes as often as four times according to the console.log. Also according to the console.log offset is not registering smoothly. That variable will jump at times going from 12, 24, 48, 72, 96 instead of 12, 24, 36, 48, 60, 72, 84, 96

Is there a better method for this jQuery script to work?

[pixelsoul]

I did a quick test with your jQuery function on my dev box here and I am not able to duplicate the issue. It seems to be working as designed for me. Perhaps an issue with your Codeigniter query, I am not sure.

[dwlamb]

Out of curiosity, which browser did you use? I took another stab at it tonight and found it performs as it should in Chrome but not Firefox.

No, it is not the query. I have stepped through the code using Netbeans with Xdebug. The issue is that $_POST is not getting the new offset every time. Sometimes it stays the same value. Other times it skips a value (e.g., 12 then 36, skipping 24) and then there is the odd time it behaves as it should.

[pixelsoul]

I tested it in Chrome. I just re-tested in Firefox and saw some similar behavior that you described. If I scroll slowely it seems to work fine, but if I scroll quickly, then I start seeing the problem you described.

[dwlamb]

Thanks for the input. At least I know it's not an anomoly that the performance is different in two browsers nor that My problem can not be replicated

[pixelsoul]

I found an even more profound issue with it in IE 11 where many times the call was duplicated. I did a quick look around and think I have something that fixes that and possibly the issue with FF.

        $(document).ready(function() {

            var base_url = window.location.origin;
            var loading  = false; //to prevents multipal ajax loads

            $(window).scroll(function() {
                if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {

                    if(loading==false) //there's more data to load
                    {

                        var offset  = $(".badge-item").length;
                        loading = true; //prevent further ajax loading

                        console.log(offset);

                        $.ajax({
                            url         : base_url+'/test/scroll/database.php',
                            type        : "post",
                            data        :  { offset_cnt : offset },
                            datatype    : 'html',
                            success     : function(response){
                                console.log(response);
                                $("#badgesWrapper").append(response);
                                offset  = offset+12;
                                loading = false;
                            },
                            error       :function(){
                                alert("failure");
                                $("#result").append('Error Occurred while fetching data.');
                                loading = false; 
                            }
                        }); 

                    }
                }
            });
        });   

I have not been able to reproduce the problem after using the above code. See if that works for you. For reference, I got the idea from the following blog post which may prove useful to you. http://www.sanwebe.com/2013/05/auto-load-records-on-page-scroll

[dwlamb]

Two thumbs up @ pixelsoul

Thank you for this bit of redirection on my work. It solved the problem perfectly and now all 415 records (and growing) load as they should.