Разработка web приложений. Как сделать редактор списка в стиле Web 2.0 (удаление записей)

Владимир | | Ajax, JavaScript, PHP.

Скриншот WebListEditor
Это пятая часть цикла статей о создании web приложения, использующего технологию Ajax для редактирования списка.
В предыдущих статьях мы рассмотрели:
структуру приложения;
создание главной страницы;
добавление новых записей;
и редактирование записей.

Примечание. Вы можете посмотреть демонстрационную версию редактора или скачать архив с файлами проекта.

Теперь добавим возможность удаления записей.
Чтобы удалить запись, пользователю нужно нажать на ссылку с изображением крестика после соответствующей записи. При этом будет вызвана функция deleteItem(), которой в качестве параметра передается id записи в БД.

Рассмотрим, как работает эта функция.

function deleteItem(id) {
	var pars = $H({itemid:id}).toQueryString();
	new Ajax.Request(
		"scripts/delete.php",
		{method:"post", parameters:pars,
		onSuccess:function(transport) {
			var data = eval('(' + transport.responseText + ')');
			//удаляем элемент из списка
			var listElem = $('itemId_' + data.deletedId).parentNode.getAttribute('id');
			Element.remove(listElem);
			var listNum = listElem.substring(8);
			//обновляем номера у всех остальных записей
			var nodes = $$('#list li');
			nodes.each(
				function(node, index) {
					if (index >= listNum) {
						node.setAttribute('id', 'listNum_' + index);
						var innerNodes = $A(node.getElementsByTagName('div'));
						innerNodes[0].innerHTML = index + 1;
						innerNodes[1].setAttribute("onclick", "closeOtherEditors(" + index + ")");
					}
				}
			);
			//удаляем редактор из массива
			editors.splice(listNum,1);
		}}
	);
}

В строках 2, 3 мы формируем строку с параметрами и выполняем Ajax запрос. В данном случае вызывается скрипт delete.php.

Если вызов прошел успешно, то будет выполнена анонимная функция, объявленная в параметре onSuccess запроса.

В этой функции последовательно выполняем следующие операции:
1) определяем id удаленного элемента (строка 7);
2) определяем элемент списка (тег <li>), в котором находится удаленный элемент (строка 9);
3) удаляем найденный элемент списка (строка 10);
4) определяем порядковый номер удаленного элемента (он не совпадает с id) (строка 11);
5) обновляем порядковые номера у всех оставшихся элементов списка (строки 13-23);
6) удаляем редактор из массива editors (строка 25).

Как видите, код довольно громоздкий, но не сложный.

Единственное на что, хотелось бы обратить ваше внимание, это строка 18. В ней с помощью функции $A() мы создаем массив всех блоков (теги <div>), которые находятся внутри текущего элемента списка. После этого мы изменяем их параметры (строки 19, 20).

Теперь рассмотрим, скрипт delete.php, который удаляет указанную запись из БД.

require_once("dbdata.php");

$id = null;
$id = $_POST['itemid'];
if (($id != null) && ($id > 0)) {
	//удаляем запись в БД
	$con = connect();
	$updateQuery = sprintf("DELETE FROM listitems WHERE id=%d",
						mysql_real_escape_string($id));
	if (mysql_query($updateQuery)) {
		$results['deletedId'] = $id;
	}
	else {
		$results['error_mes'] = "Не могу обновить запись: ".mysql_error();
	}
}
if ($con != null) {
	mysql_close($con);
}
echo json_encode($results);

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

Прежде всего, обратите внимание на запрос (строка 8) и использование функции mysql_real_escape_string, которая позволяет предотвратить атаки типа SQL Injection.
Принцип ее работы заключается в том, что она экранирует служебные символы SQL.

В результате выполнения скрипта будут возвращена строка в формате JSON, содержащая id удаленного элемента или сообщение об ошибке.

Примечание. Подробнее об использовании формата JSON можно почитать в статьях Передача данных с помощью JSON и Использование JSON в web приложениях.

В принципе, на данном этапе реализованы все функции нашего приложения.
В следующий раз мы рассмотрим установку и настройку приложения, а также изменим внешний вид списка с помощью таблицы стилей (CSS).

Интересно почитать

Входные металлические двери высокого и современного качества ТЕПЕРЬ по доступным ценам!!!