Проблемы с работой FormIt не выводятся сообщения после обработки формы.
Всем привет!
modx 3.0.3
Проблемы с настройкой формы обратной связи. Использую FetchIt с FormIt.
Сниппет отправляет письмо по электронной почте и вносит ответ в список отправленных форм пакета FormIt, но не работают вывод сообщений на странице формы и редирект после нажатия кнопки submit. При этом сообщения с ошибками валидатора выводятся штатно.
Подозреваю, что проблемы именно с FormIt, так как пробовал запускать форму через него без использования Fetchit или AjaxForm (через Ajax тоже пробовал с ним тоже не работает) с тем же результатом
Пробовал выводить на страницу сами переменные [[+fi.successMessage]] [[+fi.validation_error_message]], выводит пустоту. Пробовал настроить hook redirect, он тоже не работает. Пробовал отключать валидацию, форма добавляется, письмо отправляется, редирект не работает, сообщения не выводятся.
Никто не сталкивался с таким? Не подскажете, в чем может быть проблема?
Вызов сниппета:
modx 3.0.3
Проблемы с настройкой формы обратной связи. Использую FetchIt с FormIt.
Сниппет отправляет письмо по электронной почте и вносит ответ в список отправленных форм пакета FormIt, но не работают вывод сообщений на странице формы и редирект после нажатия кнопки submit. При этом сообщения с ошибками валидатора выводятся штатно.
Подозреваю, что проблемы именно с FormIt, так как пробовал запускать форму через него без использования Fetchit или AjaxForm (через Ajax тоже пробовал с ним тоже не работает) с тем же результатом
Пробовал выводить на страницу сами переменные [[+fi.successMessage]] [[+fi.validation_error_message]], выводит пустоту. Пробовал настроить hook redirect, он тоже не работает. Пробовал отключать валидацию, форма добавляется, письмо отправляется, редирект не работает, сообщения не выводятся.
Никто не сталкивался с таким? Не подскажете, в чем может быть проблема?
Вызов сниппета:
[[!FetchIt?
&snippet=`FormIt`
&form=`formfetchtpl`
&hooks=`email,FormItSaveForm,redirect`
&emailSubject=`Вам сообщение от сайта [[++site_name]]`
&emailTo=`[[#1.tv.email]]`
&emailTpl=`mailTpl`
&emailFrom=`robot@mail.mail`
&formName=`Сообщение из формы обратной связи`
&validate=`user:blank,name:required,email:email:required,question:required,accept:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Сообщение успешно отправлено`
&redirectTo='8'
]]
Код формы:<form novalidate action="[[~8]]" method="post" name="application_form" id="application_form" class="application_form">
<label for="name">Как к Вам обращаться</label>
<input type="text" name="name" id="name">
<span data-error="name">[[+fi.error.name]]</span>
<label for="user" class="application_form_imp">Пользователь</label>
<input type="text" name="user" id="user" class="application_form_imp">
<label for="email">Адрес электронной почты</label>
<input type="email" name="email" id="email">
<span data-error="email">[[+fi.error.email]]</span>
<label for="phone">Телефон (по желанию)</label>
<input type="tel" name="phone" id="phone">
<label for="question">Ваш вопрос</label>
<textarea name="question" id="question" cols="30" rows="10" maxlength="1000" wrap="hard"></textarea>
<span data-error="question">[[+fi.error.question]]</span>
<div class="application_form_checkbox">
<input type="hidden" name="accept" value="">
<input type="checkbox" name="accept" id="accept">
<label for="accept"> <div>Согласие на обработку персональных данных</div></label>
</div>
<span data-error="accept">[[+fi.error.accept]]</span>
</form>
<button type="submit" form="application_form" class="button text_button">ОТПРАВИТЬ</button>
[[+fi.success:is=`1`:then=`
<div role="alert">[[+fi.successMessage]]</div>
`]]
[[+fi.validation_error:is=`1`:then=`
<div role="alert">[[+fi.validation_error_message]]</div>
`]]
Комментарии: 12
Это плейсхолдер Formit и он будет заполнен и доступен при стандартной отправке Formit, т.е. с перезагрузкой страницы. А вы используете как обертку FetchIt, который позволяет делать ajax-отправку.
При всем этом у FetchIt нет никаких зависимостей, в том числе и библиотек для всплывающих уведомлений, как jgrowl у AjaxForm. Поэтому если вы хотите добавить их, то нужную библиотеку следует подключать отдельно.
Как это делается? Есть отличные примеры в документации (в принципе там все и написано)
При всем этом у FetchIt нет никаких зависимостей, в том числе и библиотек для всплывающих уведомлений, как jgrowl у AjaxForm. Поэтому если вы хотите добавить их, то нужную библиотеку следует подключать отдельно.
Как это делается? Есть отличные примеры в документации (в принципе там все и написано)
Я пытался проверить сообщение в максимально простом его исполненни с простым выводом на странице, пока без подключения всплывающих окон. Повторюсь, у меня даже голый formIt выдаёт тоже самое, а именно даже с ним не работает и хук redirect. А используемый синтаксис на странице формы взят из идущего с fletchIt примера. Ну и другие переменные выводятся нормально — сообщения об ошибках валидации работают. Такое ощущение, что я что-то простое опускаю из вида и не понимаю что.
Ок, фраза «не работает» вообще ни о чем не говорит.
Есть ошибки в консоли браузера на момент отправки? В логах Modx что нибудь пишется? Может хук email банально не отрабатывает?
Есть ошибки в консоли браузера на момент отправки? В логах Modx что нибудь пишется? Может хук email банально не отрабатывает?
При отключении хука redirect везде тишина
А после его добавления появляется вот это в консоли:
А после его добавления появляется вот это в консоли:
fetchit.js?v=3.1.1:132 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
а вот это в логах.../core/components/fetchit/src/FetchIt.php : 81) PHP warning: Undefined array key "fetchit_called"
Как-то не сразу обновился лог, вот такая ещё строчка есть
/core/components/fetchit/src/FetchIt.php : 81) PHP warning: Undefined array key "fetchit_called"
Ты немного не понимаешь в чём смысл FetchIt если пытаешься использовать хук redirect. Он нужен в том случае, если ты используешь FormIt напрямую.
Для того чтобы сделать редирект с FetchIt после успешной обработки формы, тебе нужен такой код:
Для того чтобы сделать редирект с FetchIt после успешной обработки формы, тебе нужен такой код:
document.addEventListener('fetchit:success', (e) => {
window.location.href = 'новый url'
// или
window.location.href = '[[~id страницы]]'
})
redirect пытался повесить от безысходности, после неудачных попыток вывести подтверждение отправки формы для пользователя. Но у меня redirect не заработал и с formIt напрямую.
С этим скриптом редирект с fetchIt работает, большое спасибо!
С этим скриптом редирект с fetchIt работает, большое спасибо!
Покажи JS который должен выводить уведомления?
Я не подключал никаких скриптов. Как было указано в примере шаблона формы вставил в конце конструкцию
После нажатия кнопки submit в этих сообщениях ничего не появляется. Я так понял, что в этом случае уведомления должны появляться на самой странице, собственно так и хотел реализовать. Был не прав? Так не работает? Нужно подключать дополнительные скрипты?
[[+fi.success:is=`1`:then=`
<div role="alert">[[+fi.successMessage]]</div>
`]]
[[+fi.validation_error:is=`1`:then=`
<div role="alert">[[+fi.validation_error_message]]</div>
`]]
и за ней просто для проверки<div role="alert">[[+fi.success]]</div>
<div role="alert">[[+fi.validation]]</div>
В данный момент hook redirect не вызываюПосле нажатия кнопки submit в этих сообщениях ничего не появляется. Я так понял, что в этом случае уведомления должны появляться на самой странице, собственно так и хотел реализовать. Был не прав? Так не работает? Нужно подключать дополнительные скрипты?
Если используете сниппет для отправки формы без перезагрузки страницы, то js компонента FetchIt вставляет текст ошибок внутри тега с атрибутом data-error:
<input id="c-name" type="text" name="name" value="">
<span data-error="name"></span>
если я отправлю форму с незаполненным обязательным полем, то код на странице станет таким:<input class="is-invalid" id="c-name" type="text" name="name" value="" aria-invalid="true">
<span data-error="name">
<span class="error">Это поле обязательно для заполнения.</span>
</span>
Если нужно что-либо самому сделать, то поможет инфа из раздела JS API. В частности FetchIt.Message
С версии 1.1.0 и 3.1.0 появилась настройка fetchit.frontend.default.notifier, вам стоит только включить её и у вас буду всплывающие уведомления Notyf
Пока этот функционал незадокументирован, свободного времени нет, но уже можно пользоваться
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.