Modx ajaxform не работает jgrowl

MODX. AjaxForm обработка форм с использованием Ajax

Отредактировано: 14 Ноября 2019

AjaxForm это надстройка для компонента FormIt, которая позволяет отправлять результаты форм используя ajax (можно использовать не только FormIt, но и другие скрипты). Для перехода с FormIt на AjaxForm достаточно изменить запись вызова

Этапы создания Ajax формы на сайте:

1. Устанавливаем компоненты FormIt и AjaxForm.
2. Создаем чанк с HTML формой и модификаторами.
3. Размещаем вызов в соответствующем ресурсе или шаблоне.

Стандартная форма обратной связи

В AjaxForm есть дефолтный вид всплывающих окон об успешной отправке и ошибках, чтобы его изменить, надо указать собственные файлы в параметрах frontend_js и frontend_css.

Пример файла без jGrowl, со статичным сообщением во всплывающем окне с id massage

Документация сниппета AjaxForm

AjaxForm

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

• Регистрирует нужные скрипты на фронтенде: jQuery.Form и jQuery.jGrowl.
• Сохраняет в сессию $scriptProperties при вызове сниппета.
• Выводит указанную форму, прописывая класс ajax_form и скрытый input для получения $scriptProperties .
• Вешает обработчик на форму, чтобы она отправлялась через ajax.
• При отправке запускает указанный сниппет для обработки и возвращает ответ от него.
• Выводит сообщение об успехе, или ошибки, если есть.

Параметры сниппета

Имя	По умолчанию	Плейсхолдеры
&form	tpl.AjaxForm.example	Образец чанка с формой, которую нужно обработать.
&snippet	FormIt	Сниппет для обработки формы.
&frontend_css	[[+assetsUrl]]css/default.css	Стили оформления формы и полей с ошибками
&frontend_js	[[+assetsUrl]]js/default.js	Javascript для отправки формы через ajax
&actionUrl	[[+assetsUrl]]action.php	Адрес коннектора, на который отправляется форма

Всё, что вы указываете AjaxForm, будет передано в вызываемый сниппет.

Обработка своим сниппетом

Вы можете использовать собственный сниппет, вместо FormIt, который будет делать что угодно (хоть создавать страницы на сайте). Единственное требование — он обязательно должен возвращать JSON массив с ключами:

• status — 1 или 0, то есть успех или ошибка.
• message — сообщение о работе сниппета, выводится если status = 0.
• data — массив для полей с ошибками, в котором ключами является имя поля, а значением — сообщение об ошибке.

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

Простейший пример своего сниппета:

Этот сниппет ничего не делает, просто возвращает результат проверки имени.

Валидация формы

Сервер может вернуть ошибку отправки формы и массив полей, не прошедших проверку. Этим полям автоматически будет добавлен CSS класс error , который убирается при последующей отправке.

Так же вы можете запретить отправку формы, используя javascript переменную afValidated — если она объявлена и равна false , то форма не будет отправлена.

Обратите внимание, что все проверки на javascript можно обойти, так что эту переменную стоит использовать только для удобства пользователей, а не для реальной проверки данных.

Событие af_complete

При получении ответа от сервера вызывается событие af_complete, которое вы можете использовать для обновления содержимого страницы или другой операции javascript.

Вам просто нужно указать функцию, в которую будет передано событие javascript и объект с ответом от сервера. Обратите внимание, что внутри этого объекта есть и отправляющая форма.

redirect на другую страницу сайта, после успешной отправки формы?

Добавляем id к форме, если его нет и затем в js файл прописать вот такие строки

Можно просто обернуть в и подключить в шаблон с формой ближе к закрытию body.

Всплывающие сообщения

По умолчанию AjaxForm выводит сообщения об успешной отправке формы или о наличии ошибок. Вы можете самостоятельно вызывать их для своих целей:

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

Примеры

Отправка email сообщения при помощи FormIt с требованием некоторых полей:

Отладка

При возникновении любых проблем, в первую очередь проверяйте, отправляется ли форма без AjaxForm. Помните, что AjaxForm — сниппет-обёртка, он не отправляет письма и не проводит проверку формы. Это делает ваш сниппет или FormIt.

Так же не забывайте заглядывать в консоль браузера на предмет ошибок javascript. Если сервер выдаёт ошибку 500 при отправке, проверьте параметр register_globals у вашего PHP — он должен быть отключен.

Источник

Переопределение стилей сообщений jGrowl в AjaxForm

При использовании дополнения AjaxForm для отправки сообщений на почту в MODX Revolution часто возникает потребность стилизовать окна уведомлений и переопределить их стандартное поведение.

Давайте рассмотрим способы реализации подобных задач:

1. стандартный по документации
2. и быстрый — через переопределение стандартного метода

Cтандартный метод по переопределению стилей уведомлений AjaxForm

По документации AjaxForm для стилизации jGrowl окон (которые используются для отображения уведомлений) можно указать свои css и js файлы через параметры сниппета AjaxForm, это параметры:

• frontend_css (по умолчанию файл лежит по пути assets/components/ajaxform/css/default.css)
• frontend_js (по умолчанию файл лежит по пути assets/components/ajaxform/js/default.js)

Недостатки этих методов в том, что придется делать копии стандартных файлов, и модефицировать их код. А при обновлении плагина код ajaxform/js/default.js может измениться. Это не критично, но есть вероятность такого события. Что само себе уже не очень приятно.

Более практичный метод стилизации jGrowl уведомлений AjaxForm в MODX

Можно в своих js-файлах переопредлить нужный метод AjaxForm из файла assets/components/ajaxform/js/default.js. Давайте рассмотрим пример кода, когда для окна успеха нужно задать свойство sticky=true (чтобы окно не пропадало без явного нажатия на кнопку закрытия) и указать класс темы для уведомления, чтобы было удобнее стилизовать внешний вид виджета jGrowl:

И дальше можно легко стилизовать содержимое окна уведомления AjaxForm через селектор родителя div.jGrowl div.jGrowl-notification.taleby-message-success.

И активировать любое из доступных свойст компоненты jGrowl.

Источник

MODX AjaxForm — документация и примеры построения контактных форм

В прошлом уроке мы разобрали документация по пакету FormIt и построили сложную форму. Сегодня логическое продолжение и в данной уроке мы рассмотрим компонент AjaxForm — сниппет для отправки форм через ajax, который по умолчанию рассчитан на работу с пакетом FormIt, но можно написать собственный обработчик.

Установить AjaxForm можно через репозиторий modstore.

AjaxForm vs FormIt — что лучше использовать. Плюсы и минусы.

Мне не нравится что аякс форм, при инициализации регистрирует на фронтенде скрипты: jQuery.Form и jQuery.jGrowl . По этому, когда на странице 1 форма, я обычно использую чистый FormIt, т.к. он не добавляет своих библиотек. Когда на странице по 3-10 форм (это сейчас модно), я всегда использую AjaxForm, т.к. нет проблем с отправкой (дублированием писем) с разных форм + есть дополнительные плюшки.

• Сохраняет в сессию $scriptProperties при инициализации сниппета.
• Выводит указанную форму, прописывая класс ajax_form и скрытый input для получения $scriptProperties .
• Вешает обработчик для отправки форм через ajax — без перезагрузки страницы.
• При отправке запускает указанный вами сниппет (обработчик) и возвращает ответ от него.
• Выводит сообщение об успехе отправки, или ошибки.

Документация по AjaxForm

Основные параметры

Имя	По умолчанию	Плейсхолдеры и примечания
&form	tpl.AjaxForm.example	Образец чанка с формой, который можно взять за основу.
&snippet	FormIt	Можете написать свой сниппет для обработки формы.
&frontend_css	[[+assetsUrl]]css/default.css	Стандартные стили оформления формы и полей с ошибками, чтобы отключить их вывод, укажите пустое значение.
&frontend_js	[[+assetsUrl]]js/default.js	Javascript для отправки формы через ajax
&actionUrl	[[+assetsUrl]]action.php	Адрес коннектора, на который отправляется форма

Всплывающие сообщения

По умолчанию AjaxForm выводит сообщения об успешной отправке формы или о наличии ошибок. Можете самостоятельно вызывать их для своих целей:

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

За выплывающие уведомления, отвечает подключаемая по умолчанию javascript библиотека jQuery.jGrowl.

Обработка своим сниппетом

Хотите вместо FormIt, использовать собственный сниппет, который будет делать что угодно (например создавать страницы на сайте)? Без проблем, единственное требование — он обязательно должен возвращать JSON массив с ключами:

• status — 1 или 0, то есть успех или ошибка.
• message — сообщение о работе сниппета, выводится если status = 0.
• data — массив для полей с ошибками, в котором ключами является имя поля, а значением — сообщение об ошибке.

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

Простейший пример своего сниппета:

Примечание: данный сниппет ничего не делает, просто возвращает результат проверки имени.

Валидация формы

Сервер может вернуть ошибку отправки формы и массив полей, не прошедших проверку. Этим полям автоматически будет добавлен CSS класс error , который убирается при последующей отправке.

Так же вы можете запретить отправку формы, используя javascript переменную afValidated — если она объявлена и равна false , то форма не будет отправлена.

Важно! Все проверки на javascript можно обойти, так что лучше не использовать эту переменную стоит использовать для реальной проверки данных. Используйте только для удобства пользователей.

те прижато к верху и правой стороне.

Чтобы сменить положение, к примеру по центру, достаточно предопредилить их в своем css, к примеру так:

И точно таким же образом можно изменить весь внешний вид окошко с уведомлением, вот мой конечный код для одного из сайтов:

в итоге всплывает вот такое окошко по центру сайт.

Оптимизация скорости загрузки сайта.

1. Делайте вызов Ajaxform кэшированным (без !).
2. Объедините стандартные стили и скрипты со своими и укажите в вызове чтобы стандартные не подключались.

Берем CSS код из assets/components/ajaxform/css/lib/jquery.jgrowl.min.css, assets/components/ajaxform/css/default.css и переносим его в общий файл стилей.

default.css — из этого файла выкидываем верхнюю строку @import url(‘./lib/jquery.jgrowl.min.css’); — т.к. код мы подключили сразу.

Также берем содержимое файла assets/components/ajaxform/js/default.js и объединяем с основным js файлом.

Далее отключаем css и js в вызове ajaxform.

redirect на другую страницу сайта, после успешной отправки формы?

Добавляем id к форме, если его нет и затем в js файл прописать вот такие строки

Можно просто обернуть в и подключить в шаблон с формой ближе к закрытию body.

Настройка отправки целей в AjaxForm

Самый простой и удобный способ настроить цели на AjaxForm это добавить в сообщение успешной отправки script

Как передать адрес и заголовок страницы

Если полный адрес не выводится, попробуйте так

Чекбокс — согласие с политикой обработки персональных данных

Дополнительно

Сохранение форм в админке, добавление маски ввода для телефона, email, даты идентично formit.

Понравилась статья? Можно поблагодарить автора: отправив ему донат на

Источник

[AjaxForm] Версия 1.1.0-pl Улучшенная регистрация js

Представляю вам новую версию компонента AjaxForm, который позволяет отправлять любые формы через Ajax.

Внимание, эта версия содержит изменения, которые могут поломать работу сторонних дополнений, использующих AjaxForm. Обязательно проверяйте работу форм после обновления.

AjaxForm очень универсальный, благодаря чему некоторые разработчики используют его в своих дополнениях, но у него есть 2 неприятные особенности:

1. Он инициализируется один раз для контекста
2. Соотвественно, он может подключить только один файл javascript

Таким образом получается, что все ajax формы на сайте должны отправляться одним универсальным javascript, что не очень-то подходит для использования в сторонних дополнениях.

Так что, встречайте версию 1.1.0-pl, которая добавляет 2 новых параметра для разработчиков:

1. &formSelector — Имя CSS класса, который будет использован как jQuery селектор для инициализации формы. По умолчанию «ajax_form».
2. &objectName — Имя объекта для инициализации в подключаемом javascript. По умолчанию «AjaxForm».

При этом будут подключены все уникальные javascript, указанные в параметре &frontend_js для разных вызовов сниппета.

То есть, теперь можно написать несколько вариантов объекта AjaxForm, положить в разные файлы javascript и вызывать вот так:
Первый вызов подключить стандартный AjaxForm с родными скриптами, и запустит его родной объект. А второй вызов загрузит полностью кастомизированный скрипт и запустит уже его объект.

2 разных вызова AjaxForm на странице, с разными настройками и параметрами никак не мешают друг другу работать:

Как вы видите, в javascript больше нет глобального объекта afConfig, общего для всех скриптов. Его заменяет локальная переменная с конфигом, которую каждый экземпляр AjaxForm может использовать на свой лад.

Так что, я советую всем авторам, которые используют AjaxForm в своих дополнениях обновить их с учетом новых возможностей как можно скорее.
И я вам очень прошу, не включайте больше в свои собственные скрипты обрезанный объект AjaxForm, который перезаписывает стандартный.

Источник