Infinite Scrolling system with PHP and jquery/ajax

I'm trying to implement an infinite scrolling system in a project I'm working on. As it happens, I'm having quite a bit of trouble with it. The PHP is my code and the jquery/ajax is not my code and I'm having a hard time getting them to work properly together. I'm not very comfortable with jquery/ajax and I'm hoping I can get some help, solutions, advice, another set of eyes etc. The set up is as follows -> this is the very simple ajax load_posts.php

<?php
require_once($_SERVER["DOCUMENT_ROOT"] . "/qcic/assets/core/init.php");
$user = new User();
$posts = new Post();

$limit = 10; // loaded posts per call
$posts->getUserPosts($_REQUEST['page'], $limit);
Copy code

This is my getUserPosts() method:

public function getUserPosts($page, $limit) {

        if($page == 1) {
            $start = 0;
        } else {
            $start = ($page - 1) * $limit;
        }

        // prepare for db query
        $table = "un_posts";
        $field = "deleted";
        $value = "no";
        $rule = "ORDER BY id DESC";
        $query = $this->_db->get($table, array($field, "=", $value), $rule);
        $this->_data = $query->all(); // $this->_data is an array of objects
        
        $str = ""; //html string to return
        if (count($this->data()) > 0) {

            $num_iterations = 0; # number of results checked (not necessarily posted)
            $count = 1;
            
            $cnt = 0;
            while($cnt < count($this->data())) {
                //create post_data array
                $post_data = array(
                    "id" => $this->data()[$cnt]->id,
                    "content" => $this->data()[$cnt]->content,
                    "added_by" => $this->data()[$cnt]->add_by,
                    "date_added" => date("F d, Y H:i:s", strtotime($this->data()[$cnt]->date_added)),
                    "user_to" => $this->data()[$cnt]->user_to,
                );
            
                //prepare user string if it's not posted to a user
                if ($post_data["user_to"] == "none") {
                    $user_to = "";
                } else {
                    $user_to_obj = new User($post_data["user_to"]);
                    $user_to_firstname = $user_to_obj->data()->firstname;
                    $user_to_lastname = $user_to_obj->data()->lastname;
                    $user_to = "to <a href='" . $post_data["user_to"] ."'>" . $user_to_firstname . " " . $user_to_lastname . "</a>";
                }

                //check if poster has account closed
                $added_by_obj = new User($post_data["added_by"]);
                
                if ($added_by_obj->isClosed()) {
                    continue;
                }

                if($num_iterations++ < $start) {
                    continue;
                }

                //load 10 posts and break
                if($count > $limit) {
                    break;
                } else {
                    $count++;
                }
               

                //timeframe
                .. code remove for irrelevancy to this question

                $str .= "

                    <div class='status_post'>
                        <div class='post_profile_pic'>
                            <img src='../usernet/img/profile_pics/{$profile_pic}' width='50'>
                        </div>

                        <div class='posted_by'>
                            <a href='{$post_data['added_by']}'> {$name} </a> {$user_to} &nbsp;&nbsp;&nbsp;&nbsp; {$time_message}
                        </div>

                        <div id='post_body'>
                            {$post_data['content']}
                            <br>
                        </div>
                    </div>
                    <hr>";
                
                $cnt++;
            } //end while loop

            if($count > $limit) {
                //keeping these hidden just to store the values 
                $str .= "<input type='hidden' class='nextPage' value='" . ($page + 1) . "'>
                        <input type='hidden' class='noMorePosts' value='false'>";
            } else {
                $str .= "<input type='hidden' class='noMorePosts' value='true'><p style='text-align: centre;'> No more posts to show!</p>";
            }
        }


        echo $str;
    }
Copy code

and here is the jquery/ajax script:

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

$(document).ready(function() {

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

    //Original ajax request 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() { //window object scroll event created
        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(data) {
                    $('.posts_area').find('.nextPage').remove(); //Removes current .nextpage 
                    $('.posts_area').find('.noMorePosts').remove(); //Removes current .nextpage 

                    $('#loading').hide();
                    $('.posts_area').append(data);
                }
            });

        } //End if 

        return false;

    }); //End (window).scroll(function())
});
Copy code

I've been trying to figure it out for days and haven't been able to get it to work. Right now it only shows the first 10 posts ($limit) and stops there with no scrolling functionality at all. I'm pretty lost in the jungle with it right now and need some help. If anyone has the time and will I'm hoping to get more sets of eyes on it to tell me where I've gone wrong. Thanks

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.