Что дописать в файле, чтобы выводился контент из чата?

Question

[svilkov87]

Доброго дня!
Есть четыре файла:
index.php:

<?php
include ("include/connection.php");
session_start();
## проверка ошибок
error_reporting(E_ALL | E_STRICT);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

//Выбираем сообщения
$st = $pdo->query('SELECT * FROM `comments` ORDER BY id DESC ');
$comments = $st->fetchAll();
?>

 <textarea id="txtMessage"></textarea>
    <br>
    <button id="btnSend">Отправить</button>
    <hr>
    <?php foreach($comments as $item):?>
    <div id="messages"><?php echo $item['text'];?></div>
    <?php endforeach;?>

save.php (обработчик добавления комментариев в бд):

<?php
include ("include/connection.php");
session_start();
## проверка ошибок
error_reporting(E_ALL | E_STRICT);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

//Добавление сообщения
    $msg = $_POST['msg'];
    $insert = $pdo->prepare("INSERT INTO `comments` SET text=:text");
    $insert->bindParam(':text', $msg);
    $insert->execute();

?>

show.php(обработчик выборки комментариев из бд):

<?php
include ("include/connection.php");
session_start();
## проверка ошибок
error_reporting(E_ALL | E_STRICT);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);


//Выбираем сообщения
$st = $pdo->query('SELECT * FROM `comments` ORDER BY id DESC ');
$comments = $st->fetchAll();

foreach($comments as $item):
echo "
<div id='messages'>$item[text]</div>
";
endforeach;

?>

main.js:

<script type="text/javascript">

        $(document).ready(function(){
            //Послать сообщение
            $('#btnSend').click(function(event){
                var msg = $('#txtMessage').val();

                $.ajax({
                    type: 'POST',
                    url: 'messageSave.php',
                    data: ( {msg: msg} ),
                    success:function(msg){
                        if(msg==1){
                            $('#txtMessage').val("");
                        }
                        $.ajax({
                            type: 'POST',
                            url:"show.php",
                            success:function(html){
                                $('#messages').html(html);
                            }
                        });
                    }
                });
            });
        });
    </script>

Вопрос состоит в том, что при нажатии на #btnSend, комментарии подгружаются не по одному, а выводятся дублируя друг друга полностью, из бд.

Подскажите, в чем моя ошибка?

Answer 1

[Кирилл Нетёсин]

1. вы в цикле каждому комменту добавляете один и тот же id

<?php foreach($comments as $item):?>
    <div id="messages"><?php echo $item['text'];?></div>
    <?php endforeach;?>

2. затем пытаетесь получить список комментов, после добавления, при этом добавляя этот список в id сообщения(в данном случае в каждый) :)

$.ajax({
                            type: 'POST',
                            url:"show.php",
                            success:function(html){
                                $('#messages').html(html);
                            }
                        });

да и есть ли смысл после добавления получать весь список? если да то, сделайте контейнер для сообщений с id и добавляйте в него, если нет, то добавление коммента может вернуть сам коммент и через append можно добавить в контейнер

p.s код конечно грустный, но для обучения пойдет :)
p.p.s id - на странице должен быть УНИКАЛЕН, class - нет