AjaxForm + Theme.Bootstrap форма в модальном окне

1) Как сбросить стандартное закрытие модального окна при нажатии кнопки «Submit», пока форма не пройдет валидацию средствами FormIt? Естественно с отображением ошибок в модальном окне.
2) Как подружить AjaxForm с параметром «redirectTo», так как редиректа не происходит при отправке сообщения.

Вызов и чанк пока не прилагаю потому как все стандартно оформлено с той разницей что форма находится в ресурсе и ссылка модального окна ведет на этот ресурс(документ), форма скопирована отсюда, модальное окно с кнопкой оформлены так же стандартно исходя из документации «bootstrap». Никаких дополнительных скриптов не прописано не подключено(все происходит на чистом MODx с установленными выше указанными пакетами и их зависимостями). Библиотека jQuery подключена. По отдельности все работает(кроме редиректа после отправки формы), то бишь модальное окно появляется, форма в нее загружается но окно закрывается по нажатию «submit» даже при пустой форме, при наличии полей «required». Отдельно если открыть ресурс(документ), в котором содержится форма, то все отрабатывает на ура, ошибки валидации работают и отображаются, сообщение об успешной отправке так же работает(если не задан «redirectTo» и «hook» «redirect»).

В JavaScript не силен, но понимаю что без него не решить данную проблему.

Death_Unlimited

08 октября 2017, 09:01

4 229

Комментарии: 12

Илья Уткин

08 октября 2017, 12:39

Готового решения вам тут никто не напишет. Направление, куда стоит двигаться примерно такое:

В коде модалки должен быть html-элемент form — чтобы кнопка submit была внутри этой формы
Это значит, что весь или практически весь код модалки должен быть внутри чанка tpl сниппета AjaxForm
Соответственно нужно отказаться от загрузки формы из отдельного ресурса, а вставить её код прямо в шаблон.
Если используется AjaxForm, то редирект стандартными параметрами не обрабатывается, так как работа происходит не с обычным POST-запросом, а с AJAX. Поэтому если редирект нужен, делаем его с помощью JavaScript
Но вообще, редирект — это уже не актуально. После отправки формы нужно закрывать модальное окно и открывать новую модалку — уже с сообщением об успешной отправке. Вот пример, как это можно сделать: Сообщение об успешной отправке AjaxForm в модалке

Death_Unlimited

08 октября 2017, 12:57

Окей, а как просто убрать закрытие модалки средствами bootstrap при нажатии «submit» button, но чтобы сама клавиша так и продолжала выполнять свои функции. Суть в чем, я нашел практически решение первой проблемы:

$(document).on('af_complete', function(event, response) {
    if (response.success) {
	// 1. Просто закрыть
        $('#callBack').hide();
	// 2. Или с анимацией
        $('#callBack').fadeOut();
    }
 });

Но вот только как убрать стандартное закрытие модального окна по нажатию клавиши «submit»?

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

Death_Unlimited

08 октября 2017, 13:18

Вот примерно как тут, только этот сайт на Bitrix, формы там на Ajax и грузятся они в модальное окно BOOTSTRAP с документа на который ведет ссылка. И если вы говорите что такое на MODx физически невозможно сделать стандартными средствами с использованием даже всех выше упомянутых плагинов, то грош цена тогда этому MODx-у. Потому как на том сайте все сделано стандартными либами.

Илья Уткин

08 октября 2017, 13:24

Я готов настроить вам форму за 600 руб. Если надо сделать подгрузку из ресурса, сделаю подгрузку из ресурса. Если бы у меня было готовое решение, я бы просто скинул ссылку. Готового, к сожалению нет.

Кроме того, вас никто не заставляет пользоваться MODX. Может, ну его нафиг, и переделаете сайт на битриксе?

Death_Unlimited

08 октября 2017, 13:28

Хмм))) Да я то понимаю что ответ кроится буквально в 2-х — 5-ти строках кода посему спасибо, буду иметь в виду и если сам не справлюсь то обращусь)

Death_Unlimited

08 октября 2017, 13:45

А вообще мне достаточно было бы ответа на вопрос как убрать закрытие модального окна средствами bootstrap, при нажатии клавиши submit.

Илья Уткин

08 октября 2017, 13:49

Ну вы же код не хотите показывать. Стандартное модальное окно Bootstrap не закрывается при нажатии на кнопку: https://getbootstrap.com/docs/3.3/javascript/#live-demo

Death_Unlimited

08 октября 2017, 14:45

Ну вы же код не хотите показывать. Стандартное модальное окно Bootstrap не закрывается при нажатии на кнопку: getbootstrap.com/docs/3.3/javascript/#live-demo

Так вот ведь))

форма скопирована отсюда

Вся проблема в том что в стандартном модальном окне клавиша имеет type=«button», а тут же «submit».

Илья Уткин

08 октября 2017, 14:55

Ну, значит, модальное окно-то не «скрывается». Просто запрос отправляется не AJAX-ом, а обычным POST-запросом. Обычный POST-запрос перезагружает страницу. На вновь открытой странице окно, естесственно, закрыто. Так же, как если вы просто нажмёте F5.

А это значит, что AjaxForm или не используется, или используется неправильно.

Death_Unlimited

08 октября 2017, 16:39

Сделал так как вы советовали через pdoResources

Соответственно нужно отказаться от загрузки формы из отдельного ресурса, а вставить её код прямо в шаблон

Но это получается что если у меня будет к примеру 10 модальных окон, все разного содержания и все их придется грузить через pdoResources? Неужели нет способа как-то это все сделать попроще? А насчет AjaxForm я так понял надо ресурс дополнительно в модальное окно вызывать через ajax, в общем какой-то Ajax в Аяксе и Аяксом погоняет)) Но что уж тут поделаешь, старый сайт просто переносится на MODx, а так как дизайн и верстка более менее да и система с кучей форм тоже уже приелась, то не хочется что либо кардинально менять в этом.

Илья Уткин

09 октября 2017, 08:08

Да, надо делать или Ajax в Ajax'е, или все окна сразу грузить на странице.

biper

01 сентября 2023, 09:49

модалка содержит форму ajax, при отправке формы после заполнения (правильного, неправильного — все едино… или при обновлении страницы) окно закрывается вместе с сообщениями об отправке/ошибке, которые в модальном окне отображаются в это время… А нужно, чтобы событие обрабатывалось полностью в модалке — т.е. открытая модалка закрывалась бы ТОЛЬКО принудительно, с кнопки «закрыть окно». Вопрос: как сие реализовать ?!

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

AjaxForm + Theme.Bootstrap форма в модальном окне

Комментарии: 12

Здесь упомянуты