УрокДобавляем к форме автосабмит с помощью Chaos Tools
Автоматический сабмит формы - вещь довольно удобная в некоторых ситуациях. Например, если вам надо по выбору опции из выпадающего списка сразу обновить страницу, не вынуждая пользователя при этом нажимать на кнопки. Причём кнопки (кнопку) можно даже скрыть, чтобы визуально минимизировать форму.
Довольно удобные инструменты по добавлению автосабмита имеются в модуле Chaos Tools. С ним вам понадобится проделать всего три простых шага для получения результата.
Шаг первый
Добавляем js из ctools'a, который непосредственно выполняет сабмит формы при изменении нужного элемента:
ctools_add_js('auto-submit');
Шаг второй
Теперь надо определиться, при нажатии на какой элемент формы будет срабатывать автосабмит. Для этого, к элементу с формы добавляем вот такой аттрибут FAPI:
'#attributes' => array('class' => array('ctools-auto-submit')),
Пример для селекта:
$form['some_select'] = array( '#type' => 'select', '#title' => t('Select example'), '#options' => array( 0 => t('First option'), 1 => t('Second option'), ), '#attributes' => array('class' => array('ctools-auto-submit')), );
Если же вы хотите, чтобы форма сабмитилась автоматически при изменении любого поля, то добавьте к форме вот такие параметры (в этом случае к элементам формы уже ничего вешать не надо):
'#attributes' => array('class' => array('ctools-auto-submit-full-form')),
Соответственно, код формы будет выглядеть как-то так:
$form['#attributes']['class'][] = 'ctools-auto-submit-full-form';
Шаг третий
Теперь надо создать кнопку и указать, что после изменения элемента формы должна автоматически нажиматься именно она. Для этого к кнопке вешается такой атрибут:
'#attributes' => array('class' => array('ctools-auto-submit-click')),
Если кнопка обработана ajax'ом, то добавляется ещё один класс:
'#attributes' => array('class' => array('ctools-use-ajax', 'ctools-auto-submit-click')),
В итоге кнопка получается такой:
$form['submit'] = array( '#type' => 'submit', '#value' => t('Submit'), '#attributes' => array('class' => array('ctools-use-ajax', 'ctools-auto-submit-click')), );
Всё, автосабмит прицеплен.
Послесловие
Если вы разрабатываете модуль, то не забудьте добавить к нему зависимость от Chaos Tools:
name = Module name description = Module description core = 7.x dependencies[] = ctools
На данный момент автоматический сабмит поддерживается для следующих элементов: select, radio, checkbox и textfield. В дальнейшем планируется добавить поддержку элементов из HTML5.
- Spleshka
- 22.06.2012
- 15974
Комментарии
Ммм, а чем такой способ предпочтительней своих перехватчиков событий с помощью js и jquery? По-моему с ctools менее гибко и меньше возможностей.
@emzzy,
1. Чем предпочтительнее? Время разработки. Я на автосабмит трачу ~20 секунд. Зачем писать свой велосипед, когда решение уже есть?
2. С ctools менее гибко? А какой вы ещё функционал хотите для автосабмита?
@SplasH
такой "велосипед" пишется не дольше автосабмита с ctools. Вы сами писали "На данный момент автоматический сабмит поддерживается для следующих элементов: select, radio, checkbox и textfield." - вот этим менее гибко. Труднее поддерживать код - если часть его реализовывается на стороне сервера, а часть на клиентской. Я вижу смысл использовать ctools для вещей, которые действительно сложно и долго реализовывать(например мультистеп формы или модальное окно), но не для такого.
"select, radio, checkbox и textfield." - вот этим менее гибко. "
Этих элементов хватает в 90% случаев.
@emzzy, ты пишешь и интегрируешь js решения за 20 секунд? Напиши мне в лс, сработаемся ;)
Теперь по поводу элементов. Как только мне будет их не хватать - я напишу патч и отправлю на d.org.
Конкретно это решение, не за 20 секунд, но за 5 минут точно - ибо оно элементарно. Про патчи, да, как-то забылся наш спор на drupal.ru, и то, что вы поклонник патчей ;)
Поклонник- это слабо сказано. Я считаю, что из них состоит мир ;)
> js решения за 20 секунд
$('.autosubmit').change(function(){
$(this).closest('form').submit();
});
10 секунд =)
А обернуть в бехейвиоры?
А оформить в отдельный файл?
А подключить этот файл?
А как же поддержка AJAX форм?
А как же работа с несколькими кнопками?
А как же сабмит на изменении только нужного элемента?
А как же навесить на элемент класс autosubmit?
> А обернуть в бехейвиоры?
+2 секунды
> А оформить в отдельный файл?
+2 секунды
> А подключить этот файл?
+2 секунды
> А как же поддержка AJAX форм?
она есть
> А как же работа с несколькими кнопками?
она есть
> А как же сабмит на изменении только нужного элемента?
она есть
> А как же навесить на элемент класс autosubmit?
так же как и в случае с ctools
Напиши скринкаст на 16 секунд, как ты это делаешь. И тогда я его вставлю в статью как альтернативу инструменту CTools со ссылкой на блог гуру =)
"Сплешка" ты зануда!
А как быть, если у меня форма аналог hierarhical select , т.е. селект листы формируются динамически через аякс. и очень надо сделать автосабмит.
В моем случае, если делаю как у Вас, сперва выскакивает окошко ошибки от Аякса.. а потом идет автосабмит.. Это не есть хорошо.
Нужно добавить какую-то задержку чтоли.. Подскажите пожалуйста
Не очень понятно - какая ошибка показывается при работе а ajax? Если совсем не получается с Ctools, то вы можете навесить на изменение элемента срабатывание кнопки вручную:
Как-то так. Но мне кажется в вашем случае вряд ли проблема в ctools.
За основу у меня взят код http://xandeadx.ru/blog/drupal/446 .
Текст ошибки: HTTP запрос AJAX завершен неправильно. Следует отладочная информация. Путь system/ajax . Статус текстом. Ответ текстом. ReadyState:4 . Вот скрин http://clip2net.com/s/2z1VK
Т.е. ситуация такая: форма работает так, что при изменении первого селект листа, аяксом формируется следующий, потом при изменении второго, формируется третий . Т.е. опять же повторюсь аналог hierarhical select . ТАк вот не могу понять, как тут правильно довесить автосабмит. Нужно чтобы сабмитилось при любом изменении любого элемента. КОгда так делаю, получается, что что аякс еще отрабатывает, а уже просиходит сабмит формы. И следовательно ошибка.. Ту же ошибку можно увидеть если раньше времени нажать на кнопку САБМИТ.
Может есть какой-то выход..
Погодите. Drupal AJAX сам навешивает событие $.change() для каждого элемента, обработанного через ajax. То есть вам достаточно навесить на элемент в коде элемент #ajax, и при его изменении форма автоматически будет сабмититься.
Вполне себе хорошее решение для сайта-визитки. Но на больших проктах дёргать всю кухню ctools каждый раз при загрузке формы - это зло, тем более, что у друпала есть доступная альтернатива правда для ajax.
Доброго времени суток.
Есть небольшая проблема с автосабмитом. Только поймите правильно - я только постигаю азы. Так вот, я пытаюсь на описанную вами мультистеп форму навесть описанный тут вами автосабмит.
Что получается: подключаю ctools, добавляю атрибуты селекту и кнопке NEXT:
то автосабмит не работает. Но если я на кнопке комментирую AJAX:
то автосабмит работает. Скажите, в чем моя ошибка и как подружить все это??? Заранее благодарен.
Такая же проблема. Кто-нибудь сталкивался с таким?
Комментировать