Как обновить блок после удаления и добавления и получить данные для редактирования?

Question

[Валерий Витальевич]

<div id="message"></div>
			<input type="text" name="id_comp" class="comKat" value="8"> <br>
			<textarea name="comment" cols="30" rows="3" class="comment"></textarea> <br>
			<button class="save">Submit</button>

	<h4>Задачи</h4>
	<div id="comments">
 <table border='1' style="margin-top:10px;">
    <tr>
      <td>id</td>
      <td>Наименование</td>
      <td>Цена</td>
	  <td>Дата добавления</td>
      <td>Удаление</td>
      <td>Редактирование</td>
    </tr>
	<?php
	$sql = mysqli_query($link, "SELECT ID, comment, id_comp, reg_date FROM tasks WHERE id_comp =8");
	 
      while ($result = mysqli_fetch_array($sql)) {
        echo '<tr>' .
             "<td class='id_del' value='{$result["ID"]}'>{$result['ID']}</td>" .
             "<td>{$result['comment']}</td>" .
             "<td>{$result['id_comp']}</td>" .
			 "<td>{$result['reg_date']}</td>" .
				"<td><button class='delete' id='delete' value='{$result["ID"]}'>Удалить</button></td>" .
             '</tr>';
      }
    ?>
  </table>
  </div>

Добавление записи

$comment=$_POST['comment'];
	$id_comp=$_POST['id_comp'];
	include '/config.php';
	$sql = ("INSERT INTO tasks (id_comp, comment) VALUES ('$id_comp', '$comment')");
	if(mysqli_query($link, $sql)){
    echo "Записи успешно добавлены.";
		} else{
			echo "ERROR: Не удалось выполнить $sql. " . mysqli_error($link);
		}

Удаление записи

$id=$_POST['id_del'];
	include '/config.php';
      $sql =("DELETE FROM tasks WHERE id='" . $id . "' ");
	if(mysqli_query($link, $sql)){
    echo "Записи успешно удалена.";
		} else{
			echo "ERROR: Не удалось выполнить $sql. " . mysqli_error($link);
		}

<script>

	$(document).ready(function(){
		$('button.delete').on('click', function() {
			var idValue = $(this).attr('value');
			$.ajax({
				method: "POST",
				url: "/page/ajax-del-com.php",
				data: {id_del: idValue},
				success: function(data){
						$('#message').html(data);
					}
					
			})
		})
	});
  </script>
			
<script>
	$(document).ready(function(){
		$('button.save').on('click', function() {
			var commentValue = $('textarea.comment').val();
			var id_compValue = $('input.comKat').val();
			
			$.ajax({
				method: "POST",
				url: "/page/ajax-edit-com.php",
				data: {id_comp: id_compValue, comment: commentValue},
				success: function(data){
						$('#message').html(data);
					}
			})
			$('textarea.comment').val('');
			$('input.id_comp').val('');
		})
	});
  </script>

Не могу реализовать обновление блока после удаления и добавления записи.

Как реализовать изменение данных? Пробовал то что в гугле но что-то не получается.
Буду очень благодарен за помощь.

Answer 1

[ThunderCat]

Первое что надо сделать - нормальные запросы с подготовленными выражениями, а не дырявые инъекции...

Второе - возвращать нормальные данные с понятным (машине) результатом операции, а не текстовый поток сознания. Для этого существует json, который обычно в подобных ситуациях содержит: Код ошибки, текст ошибки, и сообщение для вывода, где первое поле содержит цифру (обычно просто 1 в случае ошибки или 0 в случае успеха), второе поле является необязательным, но сильно облегчает дебаг, и третье - как раз может содержать ваше словесное описание.

Далее, по результату выполнения операции на бэкенде, исходя из данных полученных обратно аяксом уже решаем что делать, если ошибка - ничего не трогаем, если ошибки нет - добавляем/удаляем строки в таблице. Удаление - банально что-то типа del_button.closest('tr').delete() (емнип). С добавлением сложнее, но в целом ничего особенного, можно засовывать в конец списка, так как не вижу там у вас никакой сортировки при выборке. Строку формируете либо в колбэке, либо можно возвращать готовую в дополнительном поле возвращаемого жсона, и уже оттуда только добавить готовую новую ноду внутрь таблицы.

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

Answer 2

[Andry]

Очень надеюсь, что это у вас учебная задачка. Выше вам описали проблемы с безопасностью.

В общем случае вам нужно вместо $('#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 кода писать и переписывать.

Comments

[Валерий Витальевич]

Да, это учебная задача. Благодарю за подробное описание.