Главная

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

Сб, 26.09.2009 — 02: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 — 20:14
#1
Гость (гость)

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

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

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

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

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

Вверх
Пт, 14.05.2010 — 10:33
#4
Павел (гость)

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

Вверх
Пт, 14.05.2010 — 10:41
#5
graker
Аватар пользователя graker

Можно, конечно. Надо только в скрипте вместо аппенда нового содержимого к старому сделать замену старого содержимого новым (напр. .html(responseText)).
А в остальном это скорее вопрос изначальной генерации страницы, к аяксу особого отношения не имеет.

Вверх
Пт, 14.05.2010 — 11:59
#6
Павел (гость)

Спасибо, так работает. Вопрос же по генерации старницы возник из-за того, что данные накапливаются в базе данных. Для работы через аякс в этом случае необходимо именно таким образом сохранять, чтобы потом выводить на страницу? Извините за ламерские вопросы.

Вверх
Пт, 14.05.2010 — 12:30
#7
graker
Аватар пользователя graker

Нет, как мы сохраняем и загружаем данные — к аяксу вообще отношения не имеет, важно, что мы передаем браузеру при сабмите формы.

Вверх
Пнд, 24.05.2010 — 22:33
#8
Павел (гость)

Есть следующая проблема. При загрузке с помощью AJAX теряется CSS-оформление данных и их связка с JS-скриптом, которые вызываются только при первой загрузке всей страницы. Т.е. речь наверное идет об организации процесса Lazy-load. На Drupal.org нашел некоторые ссылки по этой теме, но не могу это применить (за основу взял пример этого поста и разместил выводимую после сабмита информацию в табах на jQuery).

Ссылки:
jQuery plugin to lazy load other plugins. Small and easy to use.

Improve performance with JavaScript lazy loading.

Что можно сделать для решения данной проблемы?

Вверх
Пнд, 24.05.2010 — 22:46
#9
Павел (гость)

Также, существует модуль AJAX load Но, автоматом он не включился в решение задачи, а с документацией на английском тяжеловато.

Вверх
Пнд, 24.05.2010 — 22:55
#10
graker
Аватар пользователя graker

Сходу не понять, надо разбираться, а у меня сейчас времени нет. Создайте тему на drupal.ru, так быстрее помогут.

Вверх
Ср, 16.06.2010 — 12:23
#11
Гость

Спасибо за статью.

Подскажите, как сделать, чтобы при сабмите в форме сохранялось выбранное значение? Сейчас оно сбрасывается.

Вверх
Ср, 16.06.2010 — 12:54
#12
graker
Аватар пользователя graker

Речь о сохранении значения или о показе сохраненного ранее при выводе формы? Что за выбранное значение — селект? Что значит сбрасывается? Выражайте свои мысли яснее, пожалуйста :)

Если речь о сохранении значения — сохранять надо в функции сабмита формы.
Если речь о выводе установленного ранее значения в форме — надо пользоваться свойством #default_value.

Вверх
Ср, 16.06.2010 — 14:10
#13
Гость (гость)

Речь о показе выбранного и установленного после самбита значения в select и checkbox полях формы.

Использовал:

'#default_value' => array_search(variable_get('jft_messages', $message), $options_for_select)

Но в данном случае не срабатывает. Разве сама форма при использовании АЯКса перезагружается для того, чтобы воспользоваться функцией variable_get или !_POST при показе дефолтного значения?

Уже думается, что это делать надо в JS.

Спасибо за ответ.

Вверх
Ср, 16.06.2010 — 14:20
#14
graker
Аватар пользователя graker

Так если вы сабмиттите форму через аякс, просто не сбрасывайте ее при сабмите — тогда выбранные до сабмита значения останутся на месте.

И — нет, конечно форма не перезагружается, если вы в JS не скажете ее перезагружать.

Вверх
Ср, 16.06.2010 — 15:47
#15
Гость (гость)

Да! Разобрался:)

Вверх

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

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