Разработка web приложений. Как сделать редактор списка в стиле Web 2.0 (удаление записей)
Это пятая часть цикла статей о создании 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();
-
$results[‘deletedId’] = $id;
-
}
-
else {
-
}
-
}
-
if ($con != null) {
-
}
Как видите, этот скрипт очень похож на скрипты обновления и удаления записей, описанных ранее. Поэтому я остановлюсь только на особенностях.
Прежде всего, обратите внимание на запрос (строка 
и использование функции mysql_real_escape_string, которая позволяет предотвратить атаки типа SQL Injection.
Принцип ее работы заключается в том, что она экранирует служебные символы SQL.
В результате выполнения скрипта будут возвращена строка в формате JSON, содержащая id удаленного элемента или сообщение об ошибке.
Примечание. Подробнее об использовании формата JSON можно почитать в статьях Передача данных с помощью JSON и Использование JSON в web приложениях.
В принципе, на данном этапе реализованы все функции нашего приложения.
В следующий раз мы рассмотрим установку и настройку приложения, а также изменим внешний вид списка с помощью таблицы стилей (CSS).
Понравилась статья? Подпишитесь на продолжение 
!
Добавьте эту страницу в 
Опубликовано в Ajax, JavaScript, PHP
Комментарии (2)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Оставить комментарий
почему “обновить” является кнопкой, “отменить” - ссылкой, а “удалить” - никак не реагирующей иконкой?
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’а.