Как отображать только 3 комментария, а затем еще 10 комментариев при каждом нажатии кнопки

Я создаю стандартную систему комментариев (например) к сообщению, но мне трудно отображать их так, как я хочу. Я легко могу отобразить все комментарии сразу, но я хочу отобразить сначала например 3 комментария, а потом кнопку, которая будет добавлять по 10 комментариев при каждом последующем клике.

Сначала я попытался создать событие AJAX по клику, которое загружало бы новую php-страницу в div, где отображаются комментарии. Проблема в том, что на div можно ссылаться по классу или по ID, и если на них ссылаться по классу, то новые комментарии заменят 3 уже показанных комментария (фактически выполняя отображение 3x10), и если div указанный по ID, то новые комментарии заменят первый из 3-х уже показанных комментариев.

<?php
$followingposts = DB::query('SELECT posts.id, posts.body, posts.likes, posts.comments, posts.posted_at, users.`username`, fullname FROM users, posts, followers WHERE posts.user_id = followers.user_id AND users.id = posts.user_id AND follower_id = :userid ORDER BY posts.likes DESC;', array(':userid'=>$userid));
foreach ($followingposts as $post) {
?>
    <div…

У меня есть это, чтобы отображать первые 3 комментария в сообщениях, которые отлично работают:

<?php
$commentsposts = DB::query('SELECT comments.id, comments.comment, comments.post_id, comments.likes, comments.comments, comments.posted_at, users.username, fullname
FROM comments, users
WHERE post_id = :postid
AND comments.user_id = users.id
ORDER BY comments.posted_at
DESC LIMIT 3;', array(':postid'=>$post['id']));

а затем еще один цикл foreach для комментариев:

foreach ($commentsposts as $comments) {
?>
<div class="posts_comments" id="posts_comments_id">
...

а затем функция AJAX (вызывается с кнопки):

function show_more_comments_click(elem) {
var post_id = $(elem).attr('value');
 var commentCount = 3; 
commentCount = commentCount + 10; 
$('#posts_comments_id').load('./inc/load_comments.php', {
commentNewCount: commentCount
});
};

Это загружает это:

<?php
$commentNewCount = $_POST['commentNewCount'];

$commentsposts = DB::query("SELECT comments.id, comments.comment, comments.post_id, comments.likes, comments.comments, comments.posted_at, users.username, fullname FROM comments, users WHERE post_id = :postid AND comments.user_id = users.id ORDER BY comments.posted_at DESC LIMIT 0,$commentNewCount;", array(':postid'=>$post_id));

foreach ($commentsposts as $comments) {
?>
...

Но я не могу получить новые комментарии ниже уже показанных 3 комментариев. Любые предложения о том, как этого добиться? Заранее спасибо.


person user1958149    schedule 01.07.2019    source источник
comment
Пожалуйста, найдите пейджинг php или пейджинг ajax   -  person mplungjan    schedule 01.07.2019
comment
Это PDO с некоторой оболочкой, но вы все еще используете его неправильно, потому что вводите переменные PHP в строку SQL.   -  person Dharman    schedule 01.07.2019


Ответы (1)


Вы пытались показать первые 3 комментария в контейнере div с идентификатором, например:

<div id="commentContainer">
  <div id="comment1" data-comment-id="1" class="comments">
    -- comment html --
  </div>
  <div id="comment2" data-comment-id="2" class="comments">
    -- comment html --
  </div>
  <div id="comment3" data-comment-id="3" class="comments">
    -- comment html --
  </div>
</div>

а затем нажмите кнопку, чтобы отправить запрос ajax с последним идентификатором комментария, например: comment3. который поможет сценарию собрать следующие 10 комментариев, например: comment4, comment5 и т. д., и добавить (функция jQuery append()) эти новые комментарии html в уже имеющийся у вас div с идентификатором контейнера, например: commentContainer.

<div id="commentContainer">
  <div id="comment1" data-comment-id="1" class="comments">
    -- comment html --
  </div>
  <div id="comment2" data-comment-id="2" class="comments">
    -- comment html --
  </div>
  <div id="comment3" data-comment-id="3" class="comments">
    -- comment html --
  </div>
  <div id="comment4" data-comment-id="4" class="comments">
    -- comment html --
  </div>
  <div id="comment5" data-comment-id="5" class="comments">
    -- comment html --
  </div>
  <div id="comment6" data-comment-id="6" class="comments">
    -- comment html --
  </div>
  <div id="comment7" data-comment-id="7" class="comments">
    -- comment html --
  </div>
  <div id="comment8" data-comment-id="8" class="comments">
    -- comment html --
  </div>
  <div id="comment9" data-comment-id="9" class="comments">
    -- comment html --
  </div>
  <div id="comment10" data-comment-id="10" class="comments">
    -- comment html --
  </div>
  <div id="comment11" data-comment-id="11" class="comments">
    -- comment html --
  </div>
  <div id="comment12" data-comment-id="12" class="comments">
    -- comment html --
  </div>
  <div id="comment13" data-comment-id="13" class="comments">
    -- comment html --
  </div>
</div>

Остальное, вы уже собираете комментарии с файлом вашего сервера и запросами mysql.

Спасибо

person Prince Cheema    schedule 01.07.2019