Главная

Сохранение формы в Drupal с помощью AJAX

Сб, 26.09.2009 — 01:16

Сегодня речь пойдет о том, как запрограммировать сохранение формы в Друпале через AJAX. В принципе, для этих целей уже существует модуль Ajax. Но вдруг у нас крайне хитрые потребности, или мы просто не хотим ради сабмита пары форм тащить за собой целый модуль?

В общем, задача такова: создать средствами Друпала простую форму, вывести ее на страницу, а затем — сохранять через AJAX-запросы, выводя на ту же страницу результаты сохранения и ошибки валидации формы, если таковые были. Без обновления страницы, естественно. Для решения задачи будем использовать Form API Друпала и jQuery с плагином Form. Оформим все в виде отдельного модуля.

Рассмотрим решение по порядку. Начнем с создания страницы с формой.

  1. function jf_test_menu() {
  2.         $items = array();
  3.  
  4.         //страница для теста формы
  5.         $items['jf_test'] = array(
  6.                 'title' => 'Тест jQuery Form',
  7.                 'page callback' => '_generate_page',
  8.                 'access arguments' => array(TRUE),
  9.                 'type' => MENU_NORMAL_ITEM,
  10.         );
  11.        
  12.         return $items;
  13. } //function jf_test_menu
  14.  
  15. function _generate_page() {
  16.         $output = "";
  17.        
  18.         //выведем текст
  19.         $output .= '<div class="test_messages">';
  20.         $output .= '<strong>Сообщения:</strong>';
  21.         $messages = variable_get('jft_messages',array());
  22.         foreach ($messages as $index => $message) {
  23.                 $output .= '<p>' .$message .'</p>';
  24.         }
  25.         $output .= '</div>';
  26.        
  27.         //выведем форму
  28.         $output .= drupal_get_form('_jft_form');
  29.        
  30.         return $output;
  31. } //function generate_page
  32.  
  33. function _jft_form(&$form_state) {
  34.         $form = array();
  35.        
  36.         $form['message'] = array(
  37.                 '#type' => 'textarea',
  38.                 '#title' => 'Введите текст',
  39.                 '#required' => TRUE,
  40.         );
  41.        
  42.         $form['submit'] = array(
  43.                 '#type' => 'submit',
  44.                 '#value' => 'Отправить',
  45.         );
  46.        
  47.         return $form;
  48. } //function _jft_form
  49.  
  50. function _jft_form_submit($form,&$form_state) {
  51.         //добавляем сообщение в массив
  52.         $messages = variable_get('jft_messages',array());
  53.         $messages[] = $form_state['values']['message'];
  54.         variable_set('jft_messages',$messages);
  55. } //function _jft_form_submit

Теперь если пользователь зайдет по адресу /jf_test, напишет что-нибудь в форме и нажмет «Отправить», набранный текст будет накапливаться в блоке под надписью «Сообщения». Пока отправка текста происходит обычным сохранением формы с перезагрузкой страницы. Сделаем, чтобы сообщения отправлялись с помощью AJAX.

Прежде всего, нужно добавить скрипт с плагином jQuery Form. Сама библиотека jQuery включена в Друпал и добавится автоматически. Плагин Form тоже включен в состав Друпала, но версия очень старая, а мы скачаем новую и подключим ее при генерации страницы. Заодно сразу добавим js-файл со скриптом, которым будем сохранять форму.

  1. function _generate_page() {
  2.         $output = "";
  3.        
  4.         //добавим скрипт для сабмита формы и плагин jQuery Form
  5.         drupal_add_js(drupal_get_path('module','jf_test').'/jquery.form.js');
  6.         drupal_add_js(drupal_get_path('module','jf_test').'/jf_test.js');
  7.         //...

Теперь напишем сам скрипт jf_test.js:
  1. Drupal.behaviors.jf_testBehavior = function (context) {
  2.         $("#-jft-form").ajaxForm(successCallback);
  3.         //устанавливаем обработчик сабмита формы
  4.         $("#-jft-form").submit(function () {
  5.                 //возвращаем false чтобы предотвратить обычный сабмит
  6.                 return false;
  7.         });
  8. }
  9.  
  10. //callback вызывается после успешного сабмита формы
  11. function successCallback(responseText,statusText) {
  12.         $("div.test_messages").append(responseText);
  13. }

Drupal.behaviors заменяет $(document).ready() для нашего модуля. Подробнее об этом можно почитать в описании Javascript, AJAX, AHAH API. А пока посмотрим на новоиспеченный скрипт. Вызов функции ajaxForm() подготавливает нашу форму к сохранению через AJAX. Аргументом функции является название callback-а, который будет вызван в случае успешного сохранения формы (successCallback). Функция ajaxForm() сама вытащит из формы адрес скрипта для сохранения, установленный Друпалом, так что мы можем об этом не заботиться, и сама же настроит все остальное для сохранения через AJAX при нажатии на кнопку.

Затем мы устанавливаем для события submit, то есть сохранения формы, свой обработчик. В нем возвращается false — для того чтобы избежать обычного сохранения с обновлением страницы. Ну а в функции successCallback мы добавляем в блок «Сообщения» тот текст, который получили от сервера.

Однако, если мы попытаемся выполнить все, что написали, то увидим, что в блок «Сообщения» добавилось не последнее введенное сообщение, а целая страница, сгенерированная Друпалом заново. Поэтому теперь нам нужно позаботиться об адекватных ответах на AJAX-запросы при сохранении формы. То есть, нужно возвращать не всю страницу, а только последнее введенное сообщение. Кроме того, мы бы хотели получать сообщения об ошибках валидации формы, которые возникнут, например, если мы оставим поле ввода сообщения пустым. Для этого напишем валидатор нашей формы, а также немного изменим функцию сохранения:

  1. function _jft_form_validate($form,&$form_state) {
  2.         //мы хотим показать все ошибки Друпала,
  3.         //которые могли возникнуть при валидации формы
  4.         $output = "";
  5.         $output .= theme('status_messages','error');   
  6.         if ($output != "") {
  7.                 print $output;
  8.                 exit();
  9.         }
  10. } //function _jft_form_validate
  11.  
  12. function _jft_form_submit($form,&$form_state) {
  13.         //...
  14.         //выведем последнее сообщение
  15.         print '<p>' .$form_state['values']['message'] .'</p>';
  16.         exit();
  17. } //function _jft_form_submit

Теперь мы получаем от сервера либо последнее сообщение пользователя, либо ошибку валидации. Окончательный jf_test.js выглядит так:
  1. Drupal.behaviors.jf_testBehavior = function (context) {
  2.         //отмечаем, что наша форма будет сохраняться по AJAX
  3.         //и указываем callback, вызываемый после успешного сабмита
  4.         $("#-jft-form").ajaxForm(successCallback);
  5.         //устанавливаем обработчик сабмита формы
  6.         $("#-jft-form").submit(function () {
  7.                 //убираем старые ошибки
  8.                 $("div.messages").remove();
  9.                 //возвращаем false чтобы предотвратить обычный сабмит
  10.                 return false;
  11.         });
  12. }
  13.  
  14. //callback вызывается после успешного сабмита формы
  15. function successCallback(responseText,statusText) {
  16.         if ($(responseText).hasClass("error")) {
  17.                 //есть ошибки при валидации, показываем их в начале формы
  18.                 $("#-jft-form").prepend(responseText);
  19.         } else {
  20.                 //выводим сообщение
  21.                 $("div.test_messages").append(responseText);
  22.                 //сбрасываем форму
  23.                 $("#-jft-form").resetForm();
  24.         }
  25. }

На всякий случай уточняю: функции ajaxForm и resetForm — это функции из API плагина jQuery Form, без него ничего работать не будет.

Наконец, позаботимся о злоумышленниках, коварно отключивших в своих браузерах JavaScript. Ведь если оставить все как есть, после сохранения формы они будут видеть только текст последнего сообщения и больше ничего. Чтобы все работало нормально и без JavaScript-а, будем проверять способ сохранения формы в функциях валидатора и сохранения. Окончательный текст этих функций:

  1. function _jft_form_validate($form,&$form_state) {
  2.         //проверка, используется ли AJAX для сабмита
  3.         if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
  4.                 //мы хотим показать все ошибки Друпала,
  5.                 //которые могли возникнуть при валидации формы
  6.                 $output = "";
  7.                 $output .= theme('status_messages','error');   
  8.                 if ($output != "") {
  9.                         print $output;
  10.                         exit();
  11.                 }
  12.         }
  13. } //function _jft_form_validate
  14.  
  15. function _jft_form_submit($form,&$form_state) {
  16.         //добавляем сообщение в массив
  17.         $messages = variable_get('jft_messages',array());
  18.         $messages[] = $form_state['values']['message'];
  19.         variable_set('jft_messages',$messages);
  20.  
  21.         //выводим последнее сообщение только если для сабмита используется AJAX
  22.         if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
  23.                 //выведем последнее сообщение
  24.                 print '<p>' .$form_state['values']['message'] .'</p>';
  25.                 exit();
  26.         }
  27. } //function _jft_form_submit

Теперь с выключенным JavaScript-ом все будет работать так, как будто его и не было никогда. Задача решена.

Рабочие исходники — прилагаются.

Прикрепленный файлРазмер
jf_test.tar.gz8.82 кб
Пнд, 01.03.2010 — 19:14
#1
Гость (гость)

Спасибо за информацию. Очень помогла))

Вверх
Ср, 03.03.2010 — 10:28
#2
Jamshid (гость)

Спасибо, за статья. Мне такая проблема. Я сам написал AJAX внутри тема. Но в AJAX e я получаю целая страница. Как можно решит эту проблему.

Вверх
Ср, 03.03.2010 — 13:28
#3
С телефона (гость)

В статье эта проблема рассматривается. Найдите слова «не всю страницу», там написано, что делать. Подробнее пока не могу написать — с телефона неудобно.
Если надо подробнее, скажите, через пару дней смогу ответить.

Вверх

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

CAPTCHA
Пройдите, пожалуйста, проверку. Она нужна, чтобы отличать людей от спам-роботов. А если не хотите проходить эту проверку регулярно — зарегистрируйтесь.
Image CAPTCHA
Введите цифры, изображенные на картинке (без пробелов).