Load more comments button with PHP and AJAX

Question

I am working on a video commenting system, But can't figure out how to get my load more button to work. So far my console is not showing any errors but also nothing is happening. I have checked my PHP script and everything seems to look OK and i get no errors from it.

I am still very unfamiliar with JavaScript, so I think the problem is there somewhere. Can anyone with experience please take a look and explain to me where i am going wrong?

video comment section:

<div class="comments-display">

        <?php 
            //Get Comments from db 
            $get_comments = db::getInstance()->query("SELECT * FROM video_comments WHERE video_id = ? LIMIT 0, {$resultsPerPage}", array($vid_id)); 

            if(!$get_comments->results()){ ?>
                <div class="comment-body">
                    <p class="text-center">No Comments....</p>
                </div>
            <?php

            } else {
                foreach ($get_comments->results() as $comment) { ?>
                <div class="comment-header">
                    <?php echo $comment->username . ' | ' . $comment->added; ?> 

                </div>

                <div class="comment-body">
                    <p><?php echo $comment->comment; ?></p>
                </div>

                <?php
                    $x++; 
                }

                if($x == $resultsPerPage) {
                ?>
                <li class="loadbutton"><button class="loadmore" data-page="2">Load More</button></li>

                <?php 
                } else {
                    echo 'no more comments';
                } 
        }
        ?>
</div>

Ajax request:

<script type="text/javascript">
    $( document ).on( 'click', '.loadmore', function () {
         $(this).text('Loading...');
         var btn = $(this).parent('li');
          $.ajax({
            url: 'load.php',
            type: 'POST',
            data: {
              page:$(this).data('page'),
            },
            success: function(response){
              if(response){
                btn.hide();
                $(".comments-display").append(response);
              } else {
                alert("error");
              }
            }
          });
    });
</script>

Load.php

if(isset($_POST['page'])){
    $vid_id = 123; 
    $paged = 2;
    $resultsPerPage = 6; 
    $x = 0;
    if($paged>0){
           $page_limit = $resultsPerPage*($paged-1);
           $query = "LIMIT  {$page_limit}, {$resultsPerPage}";
    }else{
            $query = " LIMIT 0 , {$resultsPerPage}";
    }

    $comments = db::getInstance()->query("SELECT * FROM video_comments WHERE video_id = ? {$query}", array($vid_id)); ?>

    <div id="comments_post" class="comments-display">
                <?php 
                foreach ($comments->results() as $comment) { ?>
                <div class="comment-header">
                <?php echo escape($comment->username) . ' | ' . $comment->added;    
                </div>
                <div class="comment-body">
                    <p><?php echo escape($comment->comment); ?></p>
                </div>
                <?php 
                    $x++;
                }

                if($x == $resultsPerPage) {
                ?>
                <button class="loadmore" data-page="2">Load More</button>
                <?php 
                } else {
                    echo '<h6 class="font-6 text-center pk-blue"> No more Comments! </h6>';

                }?>

    </div>
    <?php 

} 

Answer 1

FIXED IT!

<div id="comments_post" class="comments-block">
    <div class="comments_display">
        <?php 
            $get_comments = db::getInstance()->query("SELECT * FROM video_comments WHERE video_id = ? ORDER BY added DESC LIMIT 0, {$resultsPerPage}", array($vid_id)); 
            if(!$get_comments->results()){ ?>
                <div class="comment-header">
                </div>
                <div class="comment-body">
                    <p class="text-center">No Comments....</p>
                </div>
        <?php

            } else {
                foreach ($get_comments->results() as $comment) { ?>
                <div class="comment-header">
                    <?php echo $comment->username . ' | ' . $comment->added;  

                    if ($user->data()->user_id == $comment->user_id OR $user->hasPermission('admin')) { ?>
                            <i id="<?php echo $comment->id; ?>"class="fa  fa-trash-o onl-link-icon text-right del-com" title="delete comment?"></i>
                        <?php
                    } ?>


                </div>
                <div class="comment-body">
                    <p><?php echo $comment->comment; ?></p>
                </div>
            <?php
                    $x++; 
                }

                if($x == $resultsPerPage) {
                ?>
                <div class="loadbutton"><button class="loadmore" data-page="2">Load More</button></div>

                <?php 
                } else {
                    echo 'no more comments';
                } 
            }
        ?>
</div>
</div>


$( document ).on( 'click', '.loadmore', function () {
       $(this).text('Loading...');
       var btn = $(this).parent();
        $.ajax({
          url: 'load.php',
          type: 'POST',
          cache: false,
          data: {
            page:$(this).data('page'),
          },
          success: function(response){
            if(response){
              btn.hide();
              $(".comments-block").append(response);
            }
          }
        });
  });