Очень надеюсь, что это у вас учебная задачка. Выше вам описали проблемы с безопасностью.
В общем случае вам нужно вместо $('#message').html(data); проводить манипуляции с DOM на основании data. Это вам тоже описали выше. Когда возьметесь за реализацию, то заметите, что один и тот же html код вам приходится реализовывать и на стороне сервера средствами php и на стороне браузера через jQuery. Выкрутиться из этого можно разными способами:
- дублировать логику в двух реализациях - самый плохой вариант
- формировать html на стороне сервера, присылать его куски в бразуер аякс-ответом, а потом встраивать в DOM
- отдавать сервером даные только в json, а html (именно с данными) строить всегда на стороне клиента
- возвращать в аякс ответе сгенерированный javascript код, который будет проводить нужные манипуляции в DOM :)
Я порекомендовал бы второй вариант.
Делаете php функции, которые формируют:
Строку с данными
function htmlRowData($row){
// return IDcomment
}
Строку с формой редактирования
function htmlRowFormEdit($row){
// return ФОРМА РЕДАКТИРОВАНИЯ
}
Рисуете себе API вашего аякса: какие вы запросы отправляете и какие данные вы получаете, формат ответа.
Используем родной для javascript JSON.
В ответе сервер может возвращать такие поля:
showMessage: text // сообщение для юзера. Вывести алертом, всплывашкой (jGrowl) или еще как
rowAction: "insert"/"replace"/"remove"
rowHtml: html // html код
Загрузка страницы.
В контейнер формы выводим результат функции htmlForm(NULL) // вернет html пустой формы с кнопкой ДОБАВИТЬ
Формируем таблицу, используем while($row = mysql_fetch($q){ echo htmlRowData($row);}
Удаление записи. Ответ сервера
"showMessage": "Запись 45 успешно удалена",
"rowAction": "remove",
"rowId": 45
JS код находит
Успешное добаление записи. Ответ сервера
"showMessage": "Запись добавлена под номером 46",
"formHtml": "<div>пустая форма с кнопкой добавить</div>"
"rowAction": "insert",
"rowHtml": "<tr data-id=46><td>46<td>это коммент записи 46...</tr>"
JS код вставляет в таблицу новую строку, забивает новое содержимое в контейнер формы
Проблема при попытке добавить новую запись. Ответ сервера
"showMessage": "Упс, комментарий слишком короткий",
"formHtml": "<div>форма с заполненными полями и кнопками добавить/отменить</div>"
JS код забивает новое содержимое в контейнер формы (полезно данные обновлять, чтобы видеть, что же ты на сервер шлешь)
Успешное сохранение измененной записи. Ответ сервера
"showMessage": "Запись 44 изменена",
"formHtml": "<div>пустая форма с кнопкой добавить</div>"
"rowAction": "replace",
"rowId": 44,
"rowHtml": "<tr data-id=44><td>44<td>это новый коммент записи 44...</tr>"
JS код заменяет (jQuery.replace() ) в таблицt строку, забивает новое содержимое в контейнер формы
Дальше пишем серверную часть.
Для отладки запросов делаете небольшую страничку и с и в него скидываете приходящие ответы в виде текста $('#debug_div').text(data). И добиваетесьот сервера корректных резуотаттов согласно апи.
Переходим к брузерной части.
Читаем про делегирование обработки событий в jQuery. Навешиваем на общий контейнер формы и таблицы обработчик событий всех кнопок добаления удаления, редактирования, сохранения редактирования. Реализовуем модификации DOM, ползуемся атрибутами data-id для поиска нужных мест в table
Для кнопок можно применить такой вариант.
Все кнопки имеют атрибут data-ctrl=ACTION, подвязываетесь на событие:
$('body').on('click', '[data-ctrl]'m function(){
const $t = $(this);
const action = $t.data('ctrl');
var ajaxData = {action: "Oops"};
if('remove' === action){
ajaxData.action = "remove";
ajaxData.rowId = $t.closest('tr[data-id]').data('id'); // кнопка удаления находится в строке данных
}
...
})
$.ajax({
...
data: ajaxData,
success: function(data){
if("remove" === data.rowAction){
...
}
}
)
И ещё совет: для обкатки решения упростите ваши данные до одного поля ID - меньше js кода писать и переписывать.