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

Как закрыть модальное окно после отправки AjaxForm?
Сделал окно poli-dent.net/implantation.html внизу страницы запись на прием.
Письма уходят, но окно висит пока его руками не закроешь. Можно сделать так чтобы оно само закрывалось после удачной отправки письма?
Семен Морозов
24 февраля 2015, 12:59
modx.pro
4
17 682
0

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

Lori
24 февраля 2015, 16:29
0
ты используешь дефолтный чанк формы?
    Семен Морозов
    24 февраля 2015, 16:31
    0
    <form action="" method="post">
    								<div class="row">
    									<div class="form-group">
    										<div class="col-md-6">
    											<label>Ваше имя *</label>										
    <input type="text" value="[[+fi.name]]"  maxlength="100" class="form-control" name="name" id="af_name" placeholder="" >
    <span class="error_name">[[+fi.error.name]]</span>
    										</div>
    										<div class="col-md-6">
    											<label>Телефон:*</label>											
    <input type="text" value="[[+fi.phone]]"  maxlength="100" class="form-control" name="phone" id="af_phone" placeholder="" >
    										<span class="error_phone">[[+fi.error.phone]]</span>
                                            </div>
                                            
    									</div>
    								</div>
    <div class="row">
    									<div class="form-group">
    										<div class="col-md-6">
    											<label>Email</label>										
    <input type="text" value="[[+fi.email]]"  maxlength="100" class="form-control" name="email" id="af_email" placeholder="" >
    
    										</div>
    										<div class="col-md-6">
    											<label>Клиника у метро :*</label>											
    <select name="clinic" id="af_clinic" class="form-control" >
              <option value="1" selected>Славянский бульвар</option>
                    <option value="2">ВДНХ</option>
                </select>
    
                                          </div>
                                            
    									</div>
    								</div>
                                    
                                    	
    	[[+fi.success:is=`1`:then=`
    		<div class="alert alert-success">[[+fi.successMessage]]</div>
    	`]]
    	[[+fi.validation_error:is=`1`:then=`
    		<div class="alert alert-danger">[[+fi.validation_error_message]]</div>
    	`]]
    	<div class="row" style="margin-top:10px;">
    									<div class="col-md-12">
    										
    										<input type="submit" value="Записаться" class="btn btn-primary btn-lg" data-loading-text="Грузим...">
    									</div>
    								</div>
    							</form>
      Lori
      24 февраля 2015, 16:40
      -1
      попробуй в кнопку добавить onclick=«closeWindow()

      <input type="submit" value="Записаться" class="btn btn-primary btn-lg" data-loading-text="Грузим..." onclick="closeWindow()>
        Семен Морозов
        24 февраля 2015, 16:58
        0
        Так она будет закрываться сразу же после нажатия на кнопку. А если поля не заполнены? Надо ведь, чтоб после успешной проверки полей она закрывалась.
          Lori
          24 февраля 2015, 16:59
          0
          да, я только допер что чушь предложил.
            Семен Морозов
            24 февраля 2015, 17:01
            0
            В файле default.js вызывается триггер в случае success видимо где то там вешать надо
              Lori
              24 февраля 2015, 17:04
              0
              это да, просто интересно, должен же быть попроще вариант
    but1head
    24 февраля 2015, 17:27
    +1
    $(document).on('af_complete', function(event,res) {
    	if(res.success) // paste your code here...
    });
      Семен Морозов
      24 февраля 2015, 17:28
      0
      Поясните пожалуйста, что куда и зачем.
        but1head
        24 февраля 2015, 17:28
        0
        modx.pro/components/3342-ajaxform-version-1-0-2-pl/

        Добавлен вызов jQuery события af_complete после отправки формы. Теперь вы можете что-то делать с ответом от сервера:
        $(document).on('af_complete', function(event, response) {
        	console.log(event, response);
        });


        в вашем случае это будет выглядеть так

        $(document).on('af_complete', function(event,res) {
        	if(res.success) $('#popup_order').foundation('reveal', 'close');
        });
          Семен Морозов
          24 февраля 2015, 19:07
          0
          Не получилось(
          Добавил перед вызовом

          [[!AjaxForm?
            Сергей Шлоков
            25 февраля 2015, 09:55
            0
            Попробуй так
            $(document).on('af_complete', function(event,res) {
            	if(res.success) $('#popup_order').trigger('reveal:close');
            });
            П.С. Это для Семена. Плохо прицелился. )
        Семен Морозов
        24 февраля 2015, 19:06
        0
        Спасибо, большое за помощь.
        Что то только не работает. не пойму что не так. poli-dent.net/implantation.html
          Wassi Wassinen
          24 февраля 2015, 23:43
          0
          Что за скрипт используется для открытия модального окна?
            but1head
            25 февраля 2015, 10:40
            1
            +1
            $(document).on('af_complete', function(event,res) {
            	if(res.success) $('.close-reveal-modal').click();
            });
            вы я надеюсь это в <script пихаете? (или .js)
              Семен Морозов
              25 февраля 2015, 10:45
              0
              Да конечно в скрипт пихаю))
              Спасибо, все получилось! Ваш скрипт сработал!
            Семен Морозов
            25 февраля 2015, 10:45
            0
            Всем огромное спасибо за помощь!
              Сергей
              12 октября 2015, 21:02
              0
              Всем привет!

              Что-то я не догоняю, прошу посодействовать.
              Значит, нужно мне чтобы после корректного заполнения формы модальное окно закрывалось — пишу следующую форму и скрип:

              <form class="form" action="[[~[[*id]]]]" method="post" name="f1">
                  <input type="hidden" name="nospam:blank" value="" />
              
                  <div class="form-group">
              		<label for="name">ИМЯ</label>
              		<span class="error_name">[[!+fi.error.name]]</span>
              		<input type="text" class="form-control" name="name" id="name" placeholder="Ваше имя" value="[[!+fi.name]]" />
              	</div>
              	
              	<div class="form-group">
              		<label for="tel">ТЕЛЕФОН</label>
              		<span class="error_tel">[[!+fi.error.tel]]</span>
              		<input type="text" class="form-control" name="tel" id="tel" placeholder="Контактный номер телефона" value="[[!+fi.tel]]" />
              	</div>
              	
              	<button type="submit" class="btn btn-default">Отправить</button>
              </form>
              <script>
              $(document).on('af_complete', function(event, response) {
                  var form = response.form;
                  if (form.attr('id') == 'callBack') {
                      form.hide();
                  }
                  else {
                      console.log(response)
                  }
              });
              </script>
              Форма отправляется, но модальное окно остается на месте — как быть?
              Заранее большое спасибо!
                Сергей Шлоков
                12 октября 2015, 21:56
                0
                Не знаю, что возвращается в response и есть ли там form, но из кода видно, что у вас в условии прописано, что если id формы равно callBack, то закрывать форму. У вашей формы нет такого атрибута с таким именем.
                  Сергей
                  13 октября 2015, 01:18
                  0
                  Вообще модальное окно с формой у меня вот так вызывается:

                  <div class="modal fade" id="callBack" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  	<div class="modal-dialog">
                  		<div class="modal-content">
                  			<div class="modal-header">
                  				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>
                  				<h3 class="modal-title" id="myModalLabel">Перезвоните мне!</h3>
                  			</div>
                  			<div class="modal-body">
                  			    [[!AjaxForm?
                                      &snippet=`FormIt`
                                      &hooks=`spam,email`
                                      &form=`tplBackCallForm`
                                      &validate=`name:required:minLength=^2^,tel:required`
                                      &validationErrorMessage=`Пожалуйста, заполните все поля!`
                                      &emailTo=`alt_anest@mail.ru`
                                      &emailSubject=`Запрос обратного звонка с сайта ktpro.ru`
                                      &emailTpl=`tplBackCallEmail`
                                      &successMessage=`Мы свяжемся с Вами в самое ближайшее время!`
                                  ]]
                  			</div>
                  		</div>
                  	</div>
                  </div>

                  Я попробовал добавить id непосредственно в форму вот так:

                  <form class="form" action="[[~[[*id]]]]" method="post" id="cbf" name="f1">
                      <input type="hidden" name="nospam:blank" value="" />
                  
                      <div class="form-group">
                  		<label for="name">ИМЯ</label>
                  		<span class="error_name">[[!+fi.error.name]]</span>
                  		<input type="text" class="form-control" name="name" id="name" placeholder="Ваше имя" value="[[!+fi.name]]" />
                  	</div>
                  	
                  	<div class="form-group">
                  		<label for="tel">ТЕЛЕФОН</label>
                  		<span class="error_tel">[[!+fi.error.tel]]</span>
                  		<input type="text" class="form-control" name="tel" id="tel" placeholder="Контактный номер телефона" value="[[!+fi.tel]]" />
                  	</div>
                  	
                  	<button type="submit" class="btn btn-default">Отправить</button>
                  </form>
                  <script>
                  $(document).on('af_complete', function(event, response) {
                      var form = response.form;
                      if (form.attr('id') == 'cbf') {
                          form.hide();
                      }
                      else {
                          console.log(response)
                      }
                  });
                  </script>

                  Теперь получается, что исчезает кусок формы (id=«cbf») и происходит это вне зависимости правильно заполнена форма или с ошибками.
                    Сергей Шлоков
                    13 октября 2015, 06:57
                    2
                    +2
                    Теперь получается, что исчезает кусок формы (id=«cbf») и происходит это вне зависимости правильно заполнена форма или с ошибками.

                    Как раз закрывается именно форма. А нужно закрывать окно.
                    $(document).on('af_complete', function(event, response) {
                        if (response.success) {
                    	// 1. Просто закрыть
                            $('#callBack').hide();
                    	// 2. Или с анимацией
                            $('#callBack').fadeOut();
                        }
                     });
                      Сергей
                      13 октября 2015, 18:19
                      0
                      Сработало, спасибо!

                      НО! теперь форма исчезает, но остается затемнение экрана, которое возникает при вызове формы:)
                      Использую стандартный bootstrap — может кто подскажет, как и от него еще избавиться?:)
                      Заранее спасибо!
                        Сергей Шлоков
                        13 октября 2015, 21:57
                        1
                        +2
                        Если используется bootstrap, то можно использовать его javascript
                        $('#callBack').modal('hide');
              Антон
              17 ноября 2015, 01:12
              0
              Коллеги, чанк вызова модальной формы имеет вид:
              <div class="popups__container" style='display:none'>
              <div class='popup-callback popup-call' data-popup-style='callback'>
              <div class="project-popup__close arcticmodal-close"><img src="assets/templates/eco/images/project-popup__close.png" alt=""></div>
              <div class='popup-callback-intro'>
              <h2 class='popup-callback__head'>Заказать звонок</h2>
              <div class='popup-callback-brd'></div>
              <p class='popup-callback-prg'>
              Чтобы узнать подробнее о строительстве Вашего дома, оставьте заявку или позвоните нам по телефону
              </p>
              <p class='popup-callback-phone tracking-phone-field'>+7 (800) 350-05-50</p>
              </div>
              [[!AjaxForm?
              	&snippet=`FormIt`
              	&form=`tpl.AjaxForm.popup`
              	&hooks=`email,FormItSaveForm`
              	&formName=`Перезвоните мне ЕКОСТРОЙ`
                  &formFields=`name,tel`
                  &fieldNames=`name==Имя,tel==Телефон`
              	&emailSubject=`Необходимо перезвонить`
              	&emailTo=`pankov-anton@yandex.ru`
              	&validate=`name:required,tel:required`
              	&validationErrorMessage=`В форме содержатся ошибки!`
              	&successMessage=`Сообщение успешно отправлено!`
              ]]
              <script>
              $(document).on('af_complete', function(event, response) {
                  if (response.success) {
                  $('.popup-call').hide();
                  }
               });    
              </script>
              </div>
              <div class='popup-callback popup-thanks'>
              <div class='popup-callback-intro'>
              <h2 class='popup-callback__head'>Спасибо за обращение!</h2>
              <p class='popup-callback-prg'>
              Мы свяжемся с Вами в ближайшее время!
              </p>
              </div>
              </div>
              </div>
              Для закрытия использую
              <script>
              $(document).on('af_complete', function(event, response) {
                  if (response.success) {
                  $('.popup-call').hide();
                  }
               });    
              </script>
              сазу же после вызова AjaxForm. Что я делаю не так?
                Сергей Шлоков
                17 ноября 2015, 07:09
                0
                Интересный вопрос. Может быть слишком близко к монитору сидишь?
                  Антон
                  17 ноября 2015, 13:22
                  0
                  я наверное обращаюсь с полной серьезностью
                    Сергей Шлоков
                    17 ноября 2015, 13:39
                    0
                    Наверно.
                    А мы глядя на код должны угадать, что в нем не так?
                    Понятное описание проблемы — уже половина успеха.
                      Антон
                      17 ноября 2015, 14:13
                      0
                      Тема ветки — закрытие модального окна после успешной отправки формы автоматически. Выше я привел код чанка модального окна и прописал
                      <script>
                      $(document).on('af_complete', function(event, response) {
                          if (response.success) {
                          $('.popup-call').hide();
                          }
                       });    
                      </script>
                      С данным скриптом закрытия не происходит. Вот я и пытаюсь найти истину. Может быть кто-то и подскажет.
                Pavel
                10 августа 2017, 18:34
                0
                Вижу что сообщение 2015 года. Но так как искал решение и нашел с трудом и то не до конца.
                Этот код
                $(document).on('af_complete', function(event, response) {
                    if (response.success) {
                        $('#exit').fadeOut();
                    }
                 });
                заработал когда поставил его за всеми js на сайте. Долго не мог решить почему не работает наверно конфликт был.
                Странно то что сайт на bootstrap а этот вариант не сработал
                $('#exit').modal('hide');
                С первым решением тоже не все гладко если закрывать всю форму остается подложка, установил так
                class="modal-body" id="exit"
                закрывается форма но остается шапка но ее хоть можно закрыть.
                  Георгий Графов
                  26 октября 2018, 12:15
                  0
                  Может кому пригодится, в UiKit 3 закрыть окно можно таким образом

                  $(document).on('af_complete', function(event, response) {
                      if (response.success) {
                         UIkit.modal('#идентификатор модального окна ').hide();
                      }
                   });
                    Роман
                    17 марта 2024, 11:07
                    0
                    Всем привет. Подскажите, как обойти?

                    На странице есть две формы, в каждой форме есть два блока, по логике, после отправки формы один блок срывается, а другой блок открывается.

                    Но т.к. на странице две формы срабатывает код у первой по коду на самой странице

                    [[!AjaxForm? 
                    	&snippet=`FormIt` 
                    	&emailTpl=`tplMail`
                    	&hooks=`email`
                    	&validate=`phone:required, fastname:blank`
                    	&frontend_css=``
                    	&emailSubject=`Обратная связь с сайта [[++site_name]]`
                    	&emailFromName=`[[++site_name]]`
                    	&emailTo=`{1 | resource: 'tplMail'}`
                    	&emailFrom=`[[++emailsender]]`
                    	&validationErrorMessage=`Пожалуйста, исправьте ошибки!`
                    	&successMessage=`Ваше сообщение успешно отправлено`
                    	&form=`@CODE:
                    		<form action="[[~[[*id]]]]" method="post" id="callbackform" class="ajax_form">
                    			<div id="form-fields">
                    				<input type="text" id="fr_name" name="name" value="[[+fi.name]]">
                    				<input type="text" id="fr_phone" name="phone" class="m-phones" value="[[+fi.phone]]" required="">
                    				<input type="submit" class="btn" data-default="Заказать звонок" value="Заказать звонок">
                    			</div>
                    			<div id="form-thanks" style="display: none;">
                    				<span class="title">Спасибо за ваше обращение!</span>
                    				<p>Мы свяжемся с Вами в ближайшее время.</p>
                    			</div>
                    		</form>
                    	` 
                    ]]
                    
                    // в второй формы 
                    <form action="[[~[[*id]]]]" method="post" id="consultationform" class="ajax_form">
                    
                    // сам JS, пытался разбить на ID формы, но не срабатывает
                    <script>
                    $(document).ready(function() {
                        AjaxForm.Message.success = function() {};
                    });
                    $(document).on('af_complete', function(event, response) {
                      var form = response.form;
                      if (form.attr('id') == 'callbackform') {
                    		$("#form-fields").fadeOut();
                    		$("#form-thanks").fadeIn();
                    		e.preventDefault();
                      }
                      if (form.attr('id') == 'consultationform') {
                    		$("#form-fields").fadeOut();
                    		$("#form-thanks").fadeIn();
                    		e.preventDefault();
                      }
                    });
                    </script>
                      Константин Ильин
                      17 марта 2024, 14:45
                      +1
                      База верстки. На одно странице не должно быть 2 или более элемента с одинаковым id.
                      У вас получается #form-fields и #form-thanks 2е штуки т.к. две формы. Надо перейти на классы и работать с конкретной формой, а не глобально.

                      <form action="[[~[[*id]]]]" method="post" id="callbackform" class="ajax_form">
                      			<div class="form-fields">
                      				<input type="text" id="fr_name" name="name" value="[[+fi.name]]">
                      				<input type="text" id="fr_phone" name="phone" class="m-phones" value="[[+fi.phone]]" required="">
                      				<input type="submit" class="btn" data-default="Заказать звонок" value="Заказать звонок">
                      			</div>
                      			<div class="form-thanks" style="display: none;">
                      				<span class="title">Спасибо за ваше обращение!</span>
                      				<p>Мы свяжемся с Вами в ближайшее время.</p>
                      			</div>
                      		</form>

                      js вроде так, с jquery давно не работал
                      if (form.attr('id') == 'callbackform') {
                          $(form).find(".form-fields").fadeOut();
                          $(form).find(".form-thanks").fadeIn();
                      }
                        Роман
                        17 марта 2024, 16:10
                        0
                        ID у форм разные, а вот у блоков да. Разрулил их разными классами, тоже вариант. Просто я на другое смотрел. Спасибо
                    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                    36