Jump to content

Jquery/ajax infinite scrolling


TechnoDiver
 Share

Recommended Posts

Hi Freaks, I've been working on an issue trying to get an infinite scrolling system to work. I originally posted about it here ->

I've been trying to debug and figure out the issue as I was pretty sure it was in the jquery/ajax script and not my PHP. The original script I'm using is in the original post linked above bur for reader convenience I'll post it again here ->

<script>
var userLoggedIn = '<?php echo $user->data()->username; ?>';

$(document).ready(function() {

    $('#loading').show();

    //ajax for loading first posts
    $.ajax({
        url: "includes/handlers/ajax_load_posts.php",
        type: "POST",
        data: "page=1&userLoggedIn=" + userLoggedIn,
        cache: false, 

        success: function(data) {
            $('#loading').hide();
            $('.posts_area').html(data);
        }
    });

    $(window).scroll(function() {
        var height = $('.posts_area').height(); //div containing posts
        var scroll_top = $(this).scrollTop();
        var page = $('.posts_area').find('.nextPage').val();
        var noMorePosts = $('.posts_area').find('.noMorePosts').val();

        if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts == 'false') {
            $('#loading').show();

            var ajaxReq = $.ajax({
                url: "includes/handlers/ajax_load_posts.php",
                type: "POST",
                data: "page=" + page + "&userLoggedIn=" + userLoggedIn,
                cache: false, 

                success: function(response) {

                    $('.posts_area').find('.nextPage').remove(); //removes current next page
                    $('.posts_area').find('.noMorePosts').remove(); //removes current next page
                    $('#loading').hide();
                    $('.posts_area').append(response);
                }

            });

        } // end if

        return false;
    });

});

</script>

the issue that I found is in the if statement condition->

if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts == 'false') {

I added some console logs->

....

console.log("This is the scrollHeight: " + document.body.scrollHeight);
console.log("This is the scrollTop: " + document.body.scrollTop);
console.log("");
console.log("This is scrollTop + innerHeight: " + (document.body.scrollTop + window.innerHeight));
console.log("");

if((document.body.scrollTop + window.innerHeight >= 2500) && noMorePosts == 'false') {
    $('#loading').show();
    console.log('This is fucked up');
    // noMorePosts = true;

.......

And it turns out that the overflow comments were being displayed but I had to scroll alll the way to the bottom of the page for it to happen. In the above code you can see where I altered the if condition to get the overflow comments to display sooner. This seems like a really bad fix to me as it's such an absolute value (2500) and doesn't take into account so many different variables in user system, setup etc etc.

Also, at times it will load the overflow comments more than once. I've seen them repeated up to 3-4 times, which is certainly not acceptable.

So I have 2 questions about this issue that I'm really hoping someone can help me resolve:

1) What is a more appropriate fix for the if condition rather than having that hardcoded 2500 in there?

2) What are some ways I can fix the sometimes repetitive overflow comments displaying?

As I said in my original post, this jquery/ajax isn't my code and I'm trying to work through it when I get the time, but there is no mechanism in it to make noMorePosts = true and my commented out attempt at it didn't work. To say that I'm really uncomfortable with jquery and ajax would be an understatement.

I look forward to reading your responses and hope a great weekend to you all. TIA

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.