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

6 января, 2008

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

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

Как вы, наверное, помните, внизу страницы размещена форма добавления новых записей в список. Разберем подробнее как реализовано создание новых записей.

Когда посетитель нажимает кнопку «Добавить», выполняется вызов функции addItem(), размещенной в файле tasks.js. Посмотрите на ее код:

  1. function addItem() {
  2.     //читаем введенное в форму значение
  3.     var v = $('item_value').value;
  4.     //формируем строку с параметрами запроса
  5.     var pars = $H({value:v}).toQueryString();
  6.     //выполняем запрос
  7.     new Ajax.Request(
  8.         "scripts/additem.php",
  9.         {method:"post", parameters:pars, onSuccess:parseAddItemResponse}
  10.     );
  11. }


В строках 3 и 5 мы читаем текст, введенный в текстовое поле, и формируем строку с запроса. Код получился предельно короткий за счет использования библиотеки Prototype.

После этого выполняем Ajax запрос с помощью функции Request() объекта Ajax. В первом параметре этой функции мы указываем имя скрипта, который добавляет запись в БД. А во втором – параметры запроса:
method – метод отправки запроса;
parameters – сформированный ранее массив с параметрами (в данном случае, параметр только один – текст записи);
onSuccess – имя функции, которая будет вызвана после получения ответа от серверного скрипта.

Работу этой функции стоит разобрать подробнее, но вначале посмотрим, как работает additem.php.

  1. require_once("dbdata.php");
  2.  
  3. $value = null;
  4. $value = $_POST['value'];
  5. $results = array();
  6. if ($value != null && $value != "") {
  7.     $value = htmlspecialchars($value);
  8.     //добавляем запись в БД
  9.     $con = connect();
  10.     $addQuery = sprintf("INSERT INTO listitems(item) VALUES('%s')",
  11.                         mysql_real_escape_string($value));
  12.     if (mysql_query($addQuery)) {
  13.         $results['id'] = mysql_insert_id();
  14.         $results['value'] = $value;
  15.     }
  16.     else {
  17.         $results['error_mes'] = "Не могу добавить запись: ".mysql_error();
  18.     }
  19. }
  20. else {
  21.     $results['error_mes'] = 'Не задано значение записи';
  22. }
  23. if ($con != null) {
  24.     mysql_close($con);
  25. }
  26. echo json_encode($results);

В строках 4,5 мы получаем текст записи из массива $_POST, и начинаем формировать массив с результатами.
Если в процессе работы скрипта возникают ошибки, мы создаем в массиве $results элемент error_mes и присваиваем ему описание ошибки.

После проверки текста записи мы с помощью функции htmlspecialchars преобразуем все специальные символы html в соответствующие эскейп последовательности. Эта простая операция позволяет сохранить дизайн страницы в нормальном состоянии :-) .

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

Если запрос выполнен успешно, получаем id добавленной записи (функция mysql_insert_id) и формируем массив с результатами.

Перед отправкой результата мы преобразуем его в формат JSON (строка 26).

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

Теперь, когда с серверной частью разобрались, возвращаемся к функции parseAddItemResponse. Напомню, она вызывается автоматически после получения ответа от сервера.

  1. function parseAddItemResponse(transport) {
  2.     var data = eval('(' + transport.responseText + ')');
  3.     //проверяем были ли ошибки
  4.     if (data.error_mes == null) {
  5.         //удаляем сообщение об ошибке (если оно осталось после
  6.         //предыдущего вызова)
  7.         var errMes = $('err_mes');
  8.         if (errMes != null) {
  9.             Element.remove(errMes);
  10.         }
  11.         //удаляем строку "нет записей" (если она есть)
  12.         var noItems = $('noItems');
  13.         if (noItems != null) {
  14.             Element.remove(noItems);
  15.         }
  16.         //вставляем полученный результат в конец списка
  17.         var list = $('list');
  18.         if (list == null) {
  19.             var content = $('content');
  20.             var newItem = new Insertion.Bottom(content, "<ul id=\"list\"></ul>");
  21.             list = $('list');
  22.         }
  23.         //вставляем новый элемент в конец списка
  24.         new Insertion.Bottom(list,
  25.             "<li id='listNum_" + (editors.length) + "'><div class='itemNum'>" +
  26.             (editors.length + 1) + "</div>" +
  27.             "<div class='itemValue' " +
  28.             "onclick='closeOtherEditors(" + editors.length +
  29.             ")' id='itemId_" + data.id + "'>" +
  30.             data.value + "</div>" +
  31.             "<a href='#' class='deleteLink' onclick='deleteItem(" +
  32.             data.id + ")'><img src='css/images/delete.gif'" +
  33.             "alt='Удалить' title='Удалить' /></a></li>");
  34.         //создаем редактор для нового элемента и добавляем его в массив
  35.         editors.push(addEditor("itemId_" + data.id, data.id));
  36.         //подсвечиваем вставленный элемент
  37.         var items = $$('#list li');
  38.         new Effect.Highlight(items.last(),
  39.             {startcolor:"#FDFFB9", endcolor:"#FFFFFF", duration:2.0});
  40.     }
  41.     else {
  42.         //выводим сообщение об ошибке
  43.         var form = $('add_item_form');
  44.         new Insertion.After(form, "<div id=\"err_mes\">" +
  45.             data.error_mes + "</div>");
  46.     }
  47. }

В параметре transport передается ответ сервера. С помощью функции eval() мы преобразуем строку с результатами в массив.

В строке 4 выполняем проверку на наличие ошибок, и если они были, выводим их описание (строки 41-46).

Если запись была успешно добавлена, начинаем формировать список с результатами. Прежде всего, удаляем сообщение об ошибке, если оно осталось после предыдущего вызова (строки 7-10). Затем создаем список, если он еще не создан (строки 17-22). После этого вставляем новый элемент внутрь списка (строки 24-33).

Естественно, при вставке нового элемента в список, мы должны сформировать такую же разметку, как и в файле index.php. Для определения порядкового номера элемента в списке мы используем параметр length массива editors, т.к. его длина всегда совпадает с количеством элементов в списке.

Добавление новых элементов на страницу выполняется функцией Insertion.Bottom(), которая вставляет текст, указанный во втором параметре, в конец элемента, заданного в первом параметре.

Удаление выполняем с помощью функции Element.remove(), которая удаляет элемент, указанный в ее первом параметре.

В строке 35 создаем встраиваемый редактор для нового элемента и добавляем его в массив editors.
После этого подсвечиваем вставленный элемент (строки 38, 39).

Подведем промежуточный итог. Добавление новой записи осуществляется в следующем порядке:
1) функция addItem() выполняет Ajax запрос;
2) скрипт additem.php принимает этот запрос и добавляет запись в БД;
3) функция parseAddItemResponse добавляет созданную запись на страницу.

В следующий раз мы рассмотрим редактирование существующих записей списка.

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

Владивосток авто предлагает новые автомобили по доступным ценам
Продажа дачных участков в подмосковье – быстрый способ заработать
Успешная карьера – залог хорошего настроения

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в Ajax, JavaScript, PHP Комментарии (10) »

]]>

Комментарии (10)

Вы можете отслеживать обсуждение записи с помощью RSS 2.0 rss link

Вы также можете оставить комментарий, или трекбек с Вашего сайта.

]]>
  2. hyperion
    17 марта 2008 в 17:31

    спасибо! статья очень помогла!

    Ответить
  3. Jelena
    7 августа 2008 в 12:56

    Ja ne mogu ponjat' v 4em oshibka, no pri dobavlenii zapisi ona avtomati4eski ne pojavljaetsja. Tol'ko esli vru4nuju sdelat' refresh:(

    Ответить
  4. uitrahmen
    1 февраля 2009 в 17:38

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

    Ответить
  5. NoviceCoder
    4 февраля 2009 в 6:42

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

    Ответить
    • Владимир
      4 февраля 2009 в 22:21

      В одном из видеороликов на официальном сайте CodeIgniter приведен такой пример. Правда там решена обратная задача, т.е. в выпадающий список вставляются данные из БД, но код будет очень похожий.
      Вам нужно:
      1) разместить на странице выпадающий список
      2) при возникновении события onclick на элементе списка отправлять ajax запрос php скрипту, который будет сохранять данные
      3) после получения ответа обновить страницу

      Ответить
  6. FeeltStidly
    14 августа 2009 в 8:56

    Для Вас музыкальные сайты,музыкальные сайты,небывалый музыкальный сайт,музыкальные новинки.

    Ответить
  7. Gena
    17 октября 2009 в 21:01

    B2B Portal fuer b2b Germany.Erweiterten Sie Ihre Einkaufsquellen oder finden Sie Ihre neue Marktplaetze.

    Ответить
]]>

Оставить комментарий

* - обязательные для заполнения поля

]]>