For some reason my variable keeps resetting to 2 despite me wanting to increment the variable when a function is called. It’s really annoying me and I’ve refactored the code several times to no avail! It should be simple…

Here is my code:

( function( $ ) {
        $( document ).ready( function () {
            var count = 2;
            var total = <?php echo $loop->max_num_pages; ?>;
            if ( count <= total ) {
                $( window ).scroll( function() {
                    if ( $( window ).scrollTop() == $( document ).height() - $( window ).height() ) {
                        $.ajax({
                            url: "<?php bloginfo( 'wpurl' ) ?>/wp-admin/admin-ajax.php",
                            type:'POST',
                            data: "action=infinite_scroll&page_no=" + count + '&loop_file=forums', 
                            success: function( html ){
                                $( "#content" ).append( html );
                            }
                        });
                        count++;
                    }
                });
            } else {
                return;
            }
        });
    })( jQuery );

I’m pretty stuck so any help would be very much appreciated!

Cheers :)

EDIT: Thanks for your responses so far! Updated code below:

<script type="text/javascript">
    pageCount = 2;
    total = <?php echo $loop->max_num_pages; ?>;
    jQuery( window ).scroll( function() {
        if  ( jQuery( window ).scrollTop() == jQuery( document ).height() - jQuery( window ).height() ){
            console.log( 'Old value: ' + pageCount );
            if ( pageCount > total ){
                return false;
            } else {
                loadArticle( pageCount );
            }
            pageCount++;
            console.log( 'New value: ' + pageCount );
        }
    }); 

    function loadArticle( pageNumber ) {
        jQuery.ajax({
            url: "<?php bloginfo( 'wpurl' ) ?>/wp-admin/admin-ajax.php",
            type:'POST',
            data: "action=infinite_scroll&page_no=" + pageNumber + '&loop_file=forums', 
            success: function( html ){
                jQuery( "#content" ).append( html );
            }
        });
    return false;
    }
</script>

New value is always 3 and old value is always 2 (output in console) so it’s still being reset…

SOLVED: The html callback in the ajax method was causing the issue. Moving the increment into there worked! New code:

( function( $ ) {
        pageCount = 2;
        total = <?php echo $loop->max_num_pages; ?>;
        $( window ).scroll( function() {
            if  ( $( window ).scrollTop() == $( document ).height() - $( window ).height() ){
                if ( pageCount > total ){
                    return false;
                } else {
                    $.ajax({
                        url: "<?php bloginfo( 'wpurl' ) ?>/wp-admin/admin-ajax.php",
                        type:'POST',
                        data: "action=infinite_scroll&page_no=" + pageCount + '&loop_file=forums', 
                        success: function( html ){
                            $( "#content" ).append( html );
                            pageCount++;
                        }
                    });
                }
            }
        });
    })( jQuery );

Read more here: SOLVED – Variable not incrementing in jQuery / JS?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: