Корзина пуста
Войти О магазине FAQ Авторы Хостинг Сообщество
Отправка форм через Ajax. Использует FormIt, но можно указать и свой сниппет.
Загрузите дополнение из админки вашего сайта. Как?
Сниппет работает просто:
  1. Регистрирует нужные скрипты на фронтенде (jQuery.Form и jQuery.jGrowl)
  2. Сохраняет в сессию $scriptProperties при вызове сниппета
  3. Выводит указанную форму, прописывая класс ajax_form и скрытый input для поучения $scriptProperties
  4. Вешает обработчик на форму, чтобы она отправлялась через ajax
  5. При отправке запускает указанный сниппет для обработки и возвращает ответ от него
  6. Выводит сообщение об успехе, или ошибки, если есть
По умолчанию все рассчитано на работу с FormIt, но можно указать и собственный сниппет.

Пример вызова для FormIt:
[[!AjaxForm?
	&snippet=`FormIt`
	&form=`tpl.AjaxForm.example`
	&hooks=`email`
	&emailSubject=`Тестовое сообщение`
	&emailTo=`info@domain.com`
	&validate=`name:required,email:required,message:required`
	&validationErrorMessage=`В форме содержатся ошибки!`
	&successMessage=`Сообщение успешно отправлено`
]]


Для вывода сообщений об ошибке заполнения поля, скрипт ищет в форме блок с классом error_имяполя и вставляет в него сообщение (см. дефолтный чанк).
При повторной отправке формы эти сообщения удаляются.

По идее, можно менять все вызовы FormIt на рабочих сайтах, просто оборачивая их в AjaxSubmit и перенося форму со страницы в чанк — должно работать.

Конечно вы можете использовать и собственный сниппет, который будет делать что угодно (хоть создавать страницы на сайте) и должен возвращать JSON массив с ключами:
  • status — 1 или 0, то есть успех или ошибка
  • message — сообщение о работе сниппета
  • data — массив для полей с ошибками, в котором ключами является имя поля, а значением — сообщение об ошибке

Для удобства работы в параметры сниппета передаётся переменная $AjaxForm с классом компонента. Советую вызывать из него методы error и success при выдаче ответа.

Простейший пример своего сниппета:
if (empty($_POST['name'])) {
	return $AjaxForm->error('Ошибки в форме', array('name' => 'Вы не заполнили имя'));
}
else {
	return $AjaxForm->success('Форма прошла проверку');
}

Вызываем так:
[[!AjaxSubmit?
	&snippet=`MySnippet`
	&form=`tpl.AjaxForm.example`
]]

Кстати

Сниппет можно использовать еще одним интересным образом — просто вызвав его на странице, вы получаете подключенный jQuery.jGrowl и можете легко показывать приятные всплывающие уведомления на javascript:
AjaxForm.Message.success('Зеленый popup');
AjaxForm.Message.error('Красный popup', 1);
AjaxForm.Message.info('Черный popup');

Вторым параметром можно указать «прилипающий» popup — его нужно будет закрыть вручную, бывает полезно для показа серьёзных ошибок.

Сниппет использует:

Исходный код находится на GitHub

AjaxForm

  • actionUrl
    • по умолчанию: [[+assetsUrl]]action.php
    • тип: textfield
    • описание: Коннектор для обработки ajax запросов.
  • form
    • по умолчанию: tpl.AjaxForm.example
    • тип: textfield
    • описание: Чанк с формой для отправки.
  • frontend_css
    • по умолчанию: [[+assetsUrl]]css/default.css
    • тип: textfield
    • описание: Файл с css стилями для подключения на фронтенде.
  • frontend_js
    • по умолчанию: [[+assetsUrl]]js/default.js
    • тип: textfield
    • описание: Файл с javascript для подключения на фронтенде.
  • snippet
    • по умолчанию: FormIt
    • тип: textfield
    • описание: Сниппет, который будет обрабатывать указанную форму.

Changelog for AjaxForm.

1.1.8-pl
==============
- Updated jGrowl to version 1.4.5.

1.1.7-pl
==============
- Fixed possible blind SQL injection in action file.

1.1.6-pl
==============
- [#33] Improved the processing of javascript errors.

1.1.5-pl
==============
- [#30] Improved support of ReCaptcha.
- PSR-2.
- Default chunk optimized for Twitter Bootstrap 3.

1.1.4-pl
==============
- [#27] Support of single quotes in attributes of form.
- Case-insensitive check of attributes of form.

1.1.3-pl
==============
- Improved validation of files.

1.1.2-pl
==============
- Compatibility with FormIt ReCaptcha.
- Small code format.

1.1.1-pl
==============
- Improved checking of availability of pdoTools.

1.1.0-pl
==============
- Improved registration of frontend javascript.
- Added parameter &formSelector for specifying name of CSS class of form.
- Added parameter &objectName for specifying name of javascript object to initialize.

1.0.7-pl
==============
- Added loading source resource to modX::resource in action.php.

1.0.6-pl
==============
- [#15] Fixed work in different contexts.

1.0.5-pl
==============
- Remove error class from fields on before form submit.

1.0.4-pl
==============
- Added checking of global js var "afValidated" before form submit.

1.0.3-pl
==============
- [#8] Improved regular expression.
- Improved compatibility with parameter "submitVar" in snippet FormIt.

1.0.2-pl
==============
- Added jQuery event "af_complete" on form submit.
- [#4] Ability to use @INLINE chunk in parameter &form, if you have pdoTools installed.
- [#3] Ability to set placeholders in form by specifying them into script parameters.
- [#2] Script will add class "error" to elements with ".error_[name_of_field]" elements in form.

1.0.1-pl
==============
- Possibly fix for Error 500 on some hosts.

1.0.0-pl
==============
- Call end snippet on page load for preparation of form. Now you can use hook "math".

1.0.0-rc
==============
- Force attribute "method=post" to form.
- Added support for sending form without javascript.

1.0.0-beta1
==============
- Improved adding class "ajax_form" to form.
- Improved snippet parameters.

1.0.0-beta0
==============
- Initial release.
  1. Василий Столейков 04 ноября 2013, 11:06 #
    Компонент очень долгожданный и решил много проблем.
    Применил компонент сразу ко всем сайтам, с которыми работаю. На некоторых использовал свой сниппет для создания новых страниц.
    Работает замечательно — СПАСИБО!
    1. Владимир Ребров 19 ноября 2013, 20:43 #
      Сегодня этот компонент меня просто спас) Спасибо огромное Василию.
      1. Константин 07 февраля 2014, 19:10 #
        Сниппет чудесный нет слов, но хотел уточнить, можно ли сделать форму регистрации с помощью этого сниппета, просто такая конструкция не работает
        [[!AjaxForm?
        		    &snippet=`Register`
        Или оно и не должно работать )
        1. Юрий 28 мая 2014, 17:49 #
          Чудесный компонент!
          А можно ли его подружить с компонентом formConstruct из этого же магазина?
          Дело в том, что там шаблон создан в формате YAML. Будет ли AjaxForm понимать его?
          1. Василий Наумкин 28 мая 2014, 18:16 #
            Скорее всего. AjaxForm — просто обёртка для FormIt или другого скрипта.
          2. Комментарий был удален.
            1. Василий Наумкин 17 июля 2014, 14:07 #
              Вопросы нужно задавать на modx.pro
            2. Rahim Egamov 06 декабря 2014, 18:43 #
              Спасибо за модуль решил свою проблему!
              1. Михаил 20 декабря 2014, 15:36 #
                Сниппет содержит только 3 формы: имя, емаил, текст. Добавьте туда еще и телефон, чекбоксы и селекторы.

                А вообще спасибо.
                1. Andrew 20 января 2015, 19:49 #
                  Посему-то в случае с собственным сниппетом он отрабатывает при загрузке страницы. Я поставил дополнительное условие в нем, проверку на $_POST. Однако по идее же сниппет должен только при отправке срабатывать.
                  1. Вихров Денис 17 марта 2015, 16:10 #
                    Доброго времени
                    не работает параметр.
                    &frontend_js=`[[+assetsUrl]]js/custom.js`

                    Плагин не подключает custom.js

                    Где именно физически должен лежать custom.js?
                    Пробовал размещать и в \assets\components\ajaxform\js,
                    и в assets\,
                    Файл не подключается
                    1. Алексей 02 апреля 2015, 09:31 #
                      Подскажите, пожалуйста, как использовать его дважды на одной странице?
                      Подойдут параметры от FormIt: submitVar и placeholderPrefix. Или там немножко другой механизм?
                      1. energyplus 16 апреля 2015, 21:18 #
                        как изменить вид письма, отправляемого на адрес?
                        1. Комментарий был удален.
                          1. Комментарий был удален.
                            1. Комментарий был удален.
                              1. Alexkktd 05 августа 2015, 07:08 #
                                Добрый день, возникла странная проблема с компонентом AjaxForm сама форма работает отлично но иногда почему то кнопка отправить приобретает параметр disabled=«disabled» и сколько ее не нажимай ничего не происходит но стоит перезагрузить страницу или переоткрыть браузер форма отлично отправляется и все приходит, такое поведение формы очень критично для меня, поэтому очень хочется устранить данную особенность…
                                1. Alexkktd 05 августа 2015, 07:25 #
                                  Проблему решил, оказалась в стороннем скрипте который при загрузке выдавал ошибку
                                2. Андрей Ананьев 12 сентября 2015, 13:20 #
                                  отправка сообщений с сайта происходит через сниппет ajaxform все хорошо работало и внезапно перестали отправляться сообщения… вчера выскакивало сообщение об успешной отправке сообщения и оно приходило на почту, а сегодня сегодня сообщение «The form contains errors» и соответственно писем на почте нет… никаких изменений в данный функционал не вносил просто «внезапно все сломалось»
                                  1. Janis 16 ноября 2015, 20:22 #
                                    Василий, огромная просьба — обновить библиотеку jGrowl до текущей.
                                    1. Antey 15 декабря 2015, 09:11 #
                                      Василий, просьба с появлением новых функций сниппетов обновлять и документацию. Касается всех компонентов.
                                      1. rybalkoserg 18 апреля 2016, 10:12 #
                                        Спасибо за компонент.

                                        В default.js рекомендовал бы поправить следующее:

                                        При заполнении формы с ошибкой и попытке отправки 2 и более раз, содержимое селектов стирается напрочь вместе с опциями:

                                        form.find('.error').html('');

                                        В остальном — все отлично.
                                        1. gas89 22 мая 2016, 08:27 #
                                          Действительно очень удобная утилита, но столкнулся с одной проблемой — у меня работает FormIt в паре с ShopKeeper-ом, при работе стандартного FormIt происходит обработка всех хуков, в то числе и того, который проверяет пустая ли корзина, но при обертке в AjaxForm даже если корзина пустая, то форма чистит поля и выводит сообщение об успешной отправке, т.е. не происходит вывода сообщения об ошибке (форма пустая) и не блокиурется отправка письма.
                                          1. Dima 14 июня 2016, 18:10 #
                                            Столкнулся с проблемой. В 2.5.0-pl Revo перестал работать модуль. FormIt работает а через AjaxForm отправляет с перезагрузкой. default js вообще не отрабатывает.
                                            1. Евгений 09 ноября 2016, 23:44 #
                                              Не разобрались в чем проблема?
                                            2. Александр 27 сентября 2016, 17:55 #
                                              на 2.5.1 тоже без Ajax работает, перезагружает страницу(
                                              1. Евгений 08 октября 2016, 00:06 #
                                                Такая же беда. Только на главной стр работает.
                                              2. Евгений 08 октября 2016, 00:06 #
                                                Версия modx 2.5.1 ajax работает только на главной странице сайта. На остальных форма отправляется с перезагрузкой страницы. Посмотрел что в коде не подключаются js… Разберитесь пожалуйста. Очень нужно!
                                                В остальном снипет шикарный…
                                                Спасибо…
                                                1. Alessandra 13 декабря 2016, 18:16 #
                                                  Попробуйте установить AjaxForm через modx, в новой версии он там доступен. Но перед тем удалите прежний AjaxForm.
                                                2. oleg 18 января 2017, 15:56 #
                                                  Компонент шикардос.

                                                  В пожеланиях нужен параметр, типа &jopa=`0` который отключает jQuery.jGrowl.

                                                  Спасибо=)
                                                  Войдите на сайт, чтобы прокомментировать.
                                                  График скачиваний дополнения за последние 30 дней. Серым фоном отмечены выходные.
                                                  Hot!
                                                  Название
                                                  AjaxForm
                                                  Версия
                                                  1.1.8-pl
                                                  Дата выпуска
                                                  03.11.2016
                                                  Автор выпуска
                                                  Василий Наумкин
                                                  Цена
                                                  Бесплатно
                                                  Загрузок
                                                  8 478
                                                  Версия MODX
                                                  от 2.2
                                                  Теги
                                                  Другие дополнения автора
                                                  SMF, Ace, mxManager, MobileDetect, msProfile, Comparison, AjaxSnippet, Markdown, Sendex, debugParser, mspQiwi, mspRobokassa, msDiscount, AdminPanel, TypoMCE, Office, mSearch2, mspZPayment, PageBreaker, eventsCalendar2, Uploadify, Jevix, Loginza, HybridAuth, Tickets, PhpHypher, DateAgo, Theme.Bootstrap, miniShop2, BannerY, yTranslit, pdoTools, MinifyX, ms2Gallery
                                                  Поделиться