Как вывести добавленный комментарий из БД с помощью AJAX?

Question

[Iossarian]

На сайте реализовал ajax добавление и удаление комментариев в БД, а также удаление комментария со страницы. Тут было все просто. Проблема в выводе только что написанного комментария без перезагрузки. Есть код блока с комментариями:

<? foreach ($comments as $comment) : ?>
            <div class="comments">
                <div class="row comtext">

                    <div class="comname">
                        <?=$comment['name'];?>
                        <br>
                        <?=formatTime($comment['date']);?>
                    </div>

                    <div class="comtent">
                        <?=$comment['text'];?>
                    </div>

                    <div class="delete">
                        <button class="btn btn-sm btn-outline-light"  id="<?=$comment['id']?>">Удалить</button>
                    </div>

                </div>
            </div>
            <? endforeach;?>

И запрос к БД

$sqlComm = 'SELECT comments.id, comments.author_id, comments.date, comments.text,
        comments.post_id, users.name FROM comments
        JOIN posts ON posts.id = comments.post_id
        JOIN users ON users.id = comments.author_id
        WHERE posts.id = ' .  $_GET['id'] .
        ' ORDER BY comments.date DESC';
$comments = $db->query($sqlComm);

Так вот, подскажите, как правильно вытягивать запись из БД и выводить ее в блоке комментариев? Спасибо.

Comments

[Антон]

После добавления обратитесь к функции last insert id, вытащите комментарий по отданному значению last insert id и отправьте результирующий массив в json_encode, где в success'е аякса prepend'ом вставите в ваш родительский блок комментариев полученный data

[edward_freedom]

Антон, а если два комента одновременно напишут, первый комент не отобразится

[Антон]

edward_freedom, Лучше бы в целом, сделать подтверждение о добавлении модалкой и перезагрузить страницу, у вас же не чат.

[Павел]

Антон, а еще можно использовать дата-атрибуты (например, data-comment-id) на блоках с комментариями с ID каждого комментария.
При вызове AJAX дополнительно отсылать на сервер все ID, которые сейчас на странице (получить ближайший блок <div class="comments">, и всех его подблоков, выдирая с каждого data-comment-id).
На сервере проверить, каких комментариев не хватает, отправить данные о новых комментариях, и в ajax.success() уже вывести новые комментарии.

[ThunderCat]

проще всего еще раз запросить все комментарии для текущего итема, возможно кто-то еще добавил комментарий и теперь у вас изменился порядок комментариев. Это исключит неправильную сортировку/отображение. Просто заменить текущий список коментов новым.

[Iossarian]

ThunderCat, Павел, Антон, в общих чертах логику ваших слов понимаю, но с практической стороны слабо. Сейчас подойдет любой вариант реализации, более понятный новичку и более верный, т.к. проект личный на набивания руки. С перезагрузкой страницы сделать не вопрос, так сперва и было. Просто сама реализация и работа с ajax интересна. Вот так выглядит блок вывода комментов
Если я пишу

var text = $('textarea.text').val();
.done(function () {
$('.comtext .comtent').prepend(  text );
})

то коммент без перезагрузки допишется ко всем комментариям, а после перезагрузки уже станет самостоятельным. Если

var text = $('textarea.text').val();
.done(function () {
$('.comtext').prepend("<div class=\"comtent\">" + text + "</div>");
})

то текст выводится без применения стилей. стилей там немало. И это все при условии, что я беру всю инфу тут же из инпутов. А если тянуть из БД с json_encode, то вообще муть. В общем-то я в программировании всего 3 месяца и для меня слишком много неочевидных вещей.

[ThunderCat]

Iossarian, хинт - в обработчике аякса добавьте вышеприведенные коды с запросом и форичем вывода комментариев, в итоге у вас в ответе сервера будет готовый хтмл, и им просто заменить текущие коментарии:

.done(function (data) {
$('.comments').parent().html(data);//здесь лучше ид/класс врапера коментариев
})

[Iossarian]

ThunderCat, то есть

$comments = $db->query($sqlComm);
$data = json_encode($comments)

А в аяксе

.done(function (data) {
var data = JSON.parse(data);
$('.comments').parent().html(data);//здесь лучше ид/класс врапера коментариев
})

Или как? И как мне правильно передать данные в аякс, эту $data?

[ThunderCat]

Iossarian, как то вы не очень пока с аяксом. При аякс запросе вы получаете со стороны сервера какие-то данные, их по умолчанию будет получать .done(data) - в data будет содержимое ответа сервера, в частности ничего не мешает вам получит готовый кусок хтмл и вставить его куда надо.

[Iossarian]

ThunderCat, да я с аяксом буквально пару-тройку дней, а в программировании в целом 3 месяца. Наверное, пока стоит отложить этот момент для более подробного изучения.

Answer 1

[sa1ch]

Что первое пришло на ум.
Заносишь в data-* id каждого комментария, при отправке формы берешь id последнего комментария и отправляешь его вместе с комментарием. После того как комментарий добавился в базу вытягиваешь все последние комменты (where id>$last_id).
Или создаешь скрытое поле с id последнего комментария и отправляешь его так же с формой.

Answer 2

[ThunderCat]

на бэкэнде:

//тут код который добавит комментарий, а далее
$sqlComm = 'SELECT comments.id, comments.author_id, comments.date, comments.text,
        comments.post_id, users.name FROM comments
        JOIN posts ON posts.id = comments.post_id
        JOIN users ON users.id = comments.author_id
        WHERE posts.id = ' .  $_GET['id'] .
        ' ORDER BY comments.date DESC';
$comments = $db->query($sqlComm);

foreach ($comments as $comment) : ?>
            <div class="comments">
                <div class="row comtext">

                    <div class="comname">
                        <?=$comment['name'];?>
                        <br>
                        <?=formatTime($comment['date']);?>
                    </div>

                    <div class="comtent">
                        <?=$comment['text'];?>
                    </div>

                    <div class="delete">
                        <button class="btn btn-sm btn-outline-light"  id="<?=$comment['id']?>">Удалить</button>
                    </div>

                </div>
            </div>
            <? endforeach;?>

на форнте:

// кусок который аякс с отправкой коммента
.done(function (data) {
$('#comments_box').html(data); // здесь comments_box - ид врапера коментариев
})

Comments

[павел Фамилия]

Здравствуйте!Вы могли бы мне помочь в ajax запросе в системе опенкарт?

[ThunderCat]

павел Фамилия, не разбираюсь в опенкарте

[павел Фамилия]

В моем случае не обязательно разбираться в опенкарт! Мне нужно сделать ajax запрос к товарам!Я примерно понимаю, как это сделать, но не до конца!