Infinity Scroll not working

Question

For my profile_page.php , by default, 10 posts (10 rows from the db) are shown to the user. If the user has more than 10 posts, and scrolls to the bottom of the page, the div should expand to show the remaining posts (10 maximum). So if a user has 13 posts in total, 10 are shown by default, and then when a user scrolls to the bottom, the remaining three will show.

That's the idea, but unfortunately, my scroll just is not working. The page realizes it has reached the bottom of the page and performs the alert("bottom )` but does not load more posts.

Here is infinity_scroll.js

$(document).ready(function(){
    var load = 0;   
    var postLen = $('.userposts_panel').find('.message_wrapper').length;
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            // start AJAX
            if(postLen >= 10){
                load++;
                $.post("inc/ajax.php", {load:load},function (data){
                $(".userposts_panel").append(data); //  class
                        alert ("bottom");
                });
            } // if closed
        } // if closed
        });
    });

The structure of my HTML in which the posts are displayed (simplified version):

<div class="userposts_panel">
   // below is the div in which each post is displayed
  <?php echo "<div class='message_wrapper'> </div> ?>
</div>

Seeing as the alert() works, I am beginning to think there is an issue with my ajax.php - but I just cannot find any problems.

Here is ajax.php (again, simplified version):

$load = htmlentities(strip_tags($_POST['load']))*10;
$query = mysqli_query ($connect, "SELECT * FROM user_thoughts WHERE added_by='$user' ORDER BY id DESC LIMIT ".$load.",10");

while ($row = mysqli_fetch_assoc($query)) {
    $thought_id      = $row['id'];
    $message_content = $row['message'];
    $date_of_msg     = $row['post_details'];
    $thoughts_by     = $row['added_by'];
    $attachent       = $row['attachment'];

    echo "<div class='message_wrapper'>
      // this is where I will depict all info such as author of post etc.
    </div>";
}
?>

Is anyone able to identify why more data is not being loaded when I reach the bottom of my page?

Edit :

Chrome console.log(data)

Firefox console.log(data)

Answer 1

Check this scroll and try it

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});