xandeadx.ru Блог музицирующего веб-девелопера

Drupal → AJAX submit с помощью progressive enhancement

Опубликовано в

Пример создания AJAX формы с помощью концепции прогрессивного улучшения (progressive enhancement). Такая форма будет работать даже при выключенном javascript.

1. Создаём обычную форму с submit callback-ом:

/**
 * Form builder
 */
function mymodule_myform($form, $form_state) {
  $form['sometext'] = array(
    '#type' => 'textfield',
    '#title' => 'Some text',
  );
 
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Submit',
  );
 
  return $form;
}
 
/**
 * Form submit callback
 */
function mymodule_myform_submit($form, $form_state) {
  ... // Submit logic
  drupal_set_message('Form submitted.');
}

2. Добавляем AJAX функциональность:

/**
 * Form builder
 */
function mymodule_myform($form, $form_state) {
  $form['sometext'] = array(
    '#type' => 'textfield',
    '#title' => 'Some text',
  );
 
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Submit',
    // new
    '#ajax' => array(
      'callback' => 'mymodule_myform_ajax_callback'
    ),
  );
 
  return $form;
}
 
/**
 * Form submit callback
 */
function mymodule_myform_submit($form, $form_state) {
  ... // Submit logic
  drupal_set_message('Form submitted.');
}
 
/**
 * Form AJAX callback
 */
function mymodule_myform_ajax_callback($form, $form_state) { // new
  return array(
    '#type' => 'ajax',
    '#commands' => array(
      ajax_command_html('#' . $form['#id'], theme('status_messages')),
    ),
  );
}

Если нужна валидация.

Написанное актуально для Drupal 7
Похожие записи

Комментарии RSS

Graceful degradation - это отказоустойчивость. Прогрессивное улучшение - это "progressive enhancement". Разница в терминах в данном случае несущественна, но она есть. См. http://designformasters.info/posts/understanding-progressive-enhancement/

спасибо, исправил

Недавно мы выложили на дорг модуль asaf (ajax submit for any form) который берет на себя всю рутину по созданию колбеков, навешивания '#ajax'.

Т.е. в простейшем случае можно просто указать форм_ид в настройках и форма будет отправляться аяксом. Можно указать только некоторые кнопки, на которые стоит цепляться. Можно юзать его API: хуки для изменения списка ajax-комманд и т.д.

Может кому будет интересно :)

Установил модуль asaf (ajax submit for any form) у себя. Форма имеет около 25 полей. Аякс не работает. Лоадер крутится, но это и все. Жаль.

Установил модуль asaf (ajax submit for any form) у себя. Форма имеет около 25 полей. Аякс не работает. Лоадер крутится, но это и все. Жаль.

Какую версию качали? Как подключали к форме? js-ошибки есть? Напишите мне пожалуйста, на taldy (at) yandex.ru, или issue заведите.

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

Если ли способ узнать прошла ли форма валидацию или нет ?

Можно. В $form_state['asaf_form_status'] в случае ошибок будет находиться значение "errors".

Вы не первый кто спрашивает, поэтому в будущем сделаю чтобы по-умолчанию commands_alter-хуки не вызывались при ошибках валидации.

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

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании