Шаг 191.
Библиотека jQuery. Интерактивные формы. Работа с числовыми данными в формах. Изменение информации с адресом доставки

    На этом шаге мы рассмотрим способ изменения адреса доставки.

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

    Но при наличии поддержки JavaScript и с использованием всей мощи библиотеки jQuery, имеющейся в нашем распоряжении, мы можем превратить такую маленькую ссылку в полноценную форму. Мы сделаем это, запросив форму из страницы РНР. Обычно данные, которыми заполняется форма, сохраняются в базе данных, но исключительно в демонстрационных целях мы будем хранить некоторые статические данные непосредственно в массиве РНР.

    Чтобы воспроизвести форму внутри области с заголовком Доставить по адресу, мы использовали метод $.get() внутри обработчика события .click():

$(document).ready(function() {
  $('#shipping-name').click(function() {
    $.get('../cgi-bin/shipping.php', function(data) {
      $('#shipping-name').remove();
      $(data).hide().appendTo('#shipping').slideDown();
    });
    return false;
  });
});

    При вызове методом $.get(), прежде чем вывести большую часть страницы, сценарий РНР (shipping.php) на стороне сервера проверяет наличие переменной $_SERVER['HTTP_X_REQUESTED_WITH'], и в случае ее отсутствия возвращает только часть страницы - саму форму.

    Внутри функции обратного вызова, которая передается методу $.get(), мы удаляем имя, на котором только что был выполнен щелчок, и на его место вставляем форму с данными, полученную от сценария shipping.php. Чтобы предотвратить действие по умолчанию (загрузку страницы, указанной в атрибуте href), предусмотренное для обработки щелчка на ссылке, мы добавили инструкцию return false. После этого область с заголовком Доставить по адресу превращается в форму, доступную для редактирования, как показано на рисунке 1 (щелкните по ссылке).

    Теперь пользователь может отредактировать адрес доставки, не покидая страницу.

    Следующий шаг - отправка формы и доставка отредактированных данных обратно на сервер с помощью jQuery. Мы начнем с сериализации данных, присутствующих в форме, и сохранения результата в переменной postData. Затем мы отправим данные на сервер, еще раз воспользовавшись сценарием shipping.php:

$(document).ready(function() {
  $('shipping form').submit(function() {
    var postData = $(this).serialize();
    $.post('shipping.php', postData);
    return false;
  };
});


   Примечание. Модуль расширения Form к библиотеке jQuery реализует более надежный метод .serialize(). Этот модуль расширения, рекомендуемый в большинстве ситуаций, когда отправка формы выполняется с применением технологии AJAX, можно найти по адресу: http://www.malsup.com/jquery/form/.

    В данный момент есть смысл удалить форму из страницы и вернуть область с заголовком Доставить по адресу в начальное состояние. Это можно реализовать внутри функции обратного вызова, которая передается только что использованному методу $.post():

$(document).ready(function() {
  $('shipping form').submit(function() {
    var postData = $(this).serialize();
    $.post('shipping.php', postData, function(data) {
      $('#shipping form').remove();
      $(data).appendTo('#shipping');
    });
    return false;
  };
});

    Но она не работает! Дело в том, что в нашей реализации мы подключили обработчик события .submit() к форме Доставить по адресу сразу же после загрузки дерева DOM, но форма не будет включена в дерево DOM, пока пользователь не щелкнет на имени в ссылке Доставить по адресу. Событие не может быть подключено к тому, чего не существует.

    Для преодоления этой проблемы можно поместить программный код, создающий форму, в функцию с именем editShipping(), а реализацию отправки формы и ее удаления - в функцию с именем saveShipping(). Тогда мы сможем использовать функцию saveShipping() в функции обратного вызова метода $.get() уже после того, как форма будет создана. Точно так же можно выполнить привязку функции editShipping() сразу же после создания дерева DOM и после повторного создания ссылки Редактировать адрес доставки в функции обратного вызова метода $.post():

$(document).ready(function() {
  var editShipping = function() {
    $.get('shipping.php', function(data) {
      $('#shipping-name').remove();
      $(data).hide().appendTo('#shipping').slideDown();
      $('#shipping form').submit(saveShipping);
    });
    return false;
  };
  var saveShipping = function() {
    var postData = $(this).serialize() + '&op=Save';
    
    $.post('shipping.php', postData, function(data) {
      $('#shipping form').remove();
      $(data).appendTo('#shipping');
      $('#shipping-name').click(editShipping);
    });
    return false;
  };
  $('#shipping-name').click(editShipping);
});

Рис.1. Окончательная версия

Полный текст этого примера можно взять здесь.

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

    На следующем шаге мы приведем окончательную версию приложения.




Предыдущий шаг Содержание Следующий шаг