Laden Sie weitere Kommentare mit PHP und AJAX

Question

Ich arbeite an einem Video-Kommentar-System, aber ich kann nicht herausfinden, wie ich meine Last mehr Knopf zum Arbeiten bekommen. Bis jetzt zeigt meine Konsole keine Fehler, aber es passiert auch nichts. Ich habe mein PHP-Skript überprüft und alles scheint OK zu sein und ich bekomme keine Fehler davon.

Ich bin immer noch sehr unbekannt mit JavaScript, also denke ich, das Problem ist irgendwo da. Kann jemand mit Erfahrung bitte einen Blick darauf werfen und mir erklären wo ich falsch liege?

Video Kommentarbereich:

<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-Anfrage:

<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

IT FIXED!

<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); 
      } 
      } 
     }); 
    });