Разработка 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).

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

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

  • tenshi

    почему «обновить» является кнопкой, «отменить» — ссылкой, а «удалить» — никак не реагирующей иконкой?

    ps:
    http://adsbb.com/free_image_hosting/1199885102.gif

  • tenshi

    почему «обновить» является кнопкой, «отменить» — ссылкой, а «удалить» — никак не реагирующей иконкой?

    ps:
    http://adsbb.com/free_image_hosting/1199885102.gif

  • >> почему “обновить” является кнопкой,
    >> “отменить” — ссылкой

    В этом примере используется готовый компонент (InPlaceEditor) из библиотеки Scriptaculous, который при активации вставляет форму с текстовым полем (input type=»text»), кнопкой «Сохранить»(input type=»submit») и ссылкой «Отмена» (ее можно убрать в настройках). Это в, общем-то, обычное решение.

    Если есть желание, с помощью CSS можно сделать кнопку практически неотличимой от ссылки.

    >> “удалить” — никак не реагирующей иконкой
    Странно. Вообще это ссылка с картинкой вместо текста. И я проверял работоспособность в IE6,7, Firefox и Opera. Все нормально работает (должен быть включен JavaScript, т.к. отправляется Ajax запрос).
    Если не сложно, скажите, каким браузером вы пользовались?

    >> ps
    В дизайне сайта используются рисунки и счетчики (их изображения загружаются с других серверов), поэтому страница появляется частями. Причем, порядок появления частей зависит от браузера и скорости соединения.
    Кстати, на скриншоте прорисовка явно остановилась на счетчике bigmir'а.

  • >> почему “обновить” является кнопкой,
    >> “отменить” — ссылкой

    В этом примере используется готовый компонент (InPlaceEditor) из библиотеки Scriptaculous, который при активации вставляет форму с текстовым полем (input type=»text»), кнопкой «Сохранить»(input type=»submit») и ссылкой «Отмена» (ее можно убрать в настройках). Это в, общем-то, обычное решение.

    Если есть желание, с помощью CSS можно сделать кнопку практически неотличимой от ссылки.

    >> “удалить” — никак не реагирующей иконкой
    Странно. Вообще это ссылка с картинкой вместо текста. И я проверял работоспособность в IE6,7, Firefox и Opera. Все нормально работает (должен быть включен JavaScript, т.к. отправляется Ajax запрос).
    Если не сложно, скажите, каким браузером вы пользовались?

    >> ps
    В дизайне сайта используются рисунки и счетчики (их изображения загружаются с других серверов), поэтому страница появляется частями. Причем, порядок появления частей зависит от браузера и скорости соединения.
    Кстати, на скриншоте прорисовка явно остановилась на счетчике bigmir'а.

  • Revan

    У меня возникает проблема с запросами когда я редктирую, удаляю или добавляю запись у меня выдаёт ошибку «Память не может быть прочитана» кто нибуть может сказать в чём здесь проблема?

    • >> Память не может быть прочитана

      Никогда не сталкивался. Данные в БД, поэтому о какой памяти идет речь не понятно. Нет доступа к БД?

      Кстати, а вы демонстрационную версию запускали или установили локально?

  • Revan

    У меня возникает проблема с запросами когда я редктирую, удаляю или добавляю запись у меня выдаёт ошибку «Память не может быть прочитана» кто нибуть может сказать в чём здесь проблема?

    • >> Память не может быть прочитана

      Никогда не сталкивался. Данные в БД, поэтому о какой памяти идет речь не понятно. Нет доступа к БД?

      Кстати, а вы демонстрационную версию запускали или установили локально?

  • Сергей

    Очень жду продолжения, хочу что бы вы показали как менять элементы списка местами а потом сохранять их в таблице. Это очень удобная штука.заранее СПАСИБО !!!

    • Спасибо за идею! Я постараюсь учесть пожелание.

  • Сергей

    Очень жду продолжения, хочу что бы вы показали как менять элементы списка местами а потом сохранять их в таблице. Это очень удобная штука.заранее СПАСИБО !!!

    • Спасибо за идею! Я постараюсь учесть пожелание.

  • ADEN

    Добавил еще один столбец (utem), вывел значение. Как сделать, чтоб при нажатии на ячейку значение ячейки открывалось в отдельной форме.

    • Сделайте ячейку редактируемой (с помощью Ajax.InPlaceEditor)