Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.09.2017, 13:06
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 89

Закрытие pop-up после отправки формы заказа звонка
Всем доброго времени суток!
На этой странице есть кнопка вызова pop-up с формой обратной связи.(Оставьте заявку)
Сделал это при помощи Contact Form 7 + Easy Modal.
После отправки окно не закрывается. А нужно что бы закрывалось через 2 секунды.
Нашел нужный мне скрипт:
$('#твоя-форма').submit(function() {
  $.ajax({
    type   : 'POST',
    url: $ajax_url,
    data : {
      name: $name_value ,
      email: $email_value,
      message: $message_value,
      subject: $subject_value,
      task: 'sendmail'
    },
    beforeSend: function(data){
      $('#submit').before('<div class="loading"></div>');
    },
    success: function (data){
      $('.loading').fadeOut(function(){
        $(this).remove();
      }); //прячется gif-ка какая-нибудь
      setTimeout(function(){
      document.forms['твоя-форма'].reset(); // очищается форма методом .reset()
      $('#myModal').modal('hide'); 
      }, 3000); // здесь закрывается модальное окно через 3 секунды
    },
    complete:function(data){
     $form.each(function(){
      this.reset();  // или так очищается форма методом .reset()
    });
    },
  });
  return false;
});


Пытаюсь применить к своему сайту, но скрипт не работает - окно не закрывается.
jQuery('.wpcf7-form sent').submit(function() {
  $.ajax({
    type   : 'POST',
    url: $ajax_url,
    data : {
      name: $name_value ,
      email: $email_value,
      message: $message_value,
      subject: $subject_value,
      task: 'sendmail'
    },
    beforeSend: function(data){
      $('#submit').before('');
},    success: function (data){
      $('.loading').fadeOut(function(){
        $(this).remove();
      }); //прячется gif-ка какая-нибудь
      setTimeout(function(){
      document.forms['.wpcf7-form sent'].reset(); // очищается форма методом .reset()
      $('#').modal('hide'); 
      }, 2000); // здесь закрывается модальное окно через 2 секунды
    },
    complete:function(data){
     $form.each(function(){
      this.reset();  // или так очищается форма методом .reset()
    });
    },
  });
  return false;
});
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2017, 13:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Сообщение от maxg5
Пытаюсь применить к своему сайту, но скрипт не работает
Так потестируй его по шагам...
Ответить с цитированием
  #3 (permalink)  
Старый 05.09.2017, 13:17
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,745

Сообщение от maxg5
Сделал это при помощи Contact Form 7 + Easy Modal.
Тут ты пишешь про Easy Modal, а в коде вызываешь Bootstrap'овский (если не ошибаюсь) метод «modal» с аргументом 'hide'.
Смотри документацию к своей библиотеке и применяй её методы.

PS. Про селектор забыл написать: он вообще бомба. Я не знаю, что бедный jQ должен вернуть, когда ему в кач-ве селектора единственную решетку передают.

Последний раз редактировалось Nexus, 05.09.2017 в 13:19.
Ответить с цитированием
  #4 (permalink)  
Старый 05.09.2017, 13:54
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 89

Скорее всего я где то селектор не тот передаю.
Easy Modal это не библиотека, а плагин для WordPress.
Пробовал за место решетки передавать в качестве селектора .eModal-1
Все равно не работает.
Ответить с цитированием
  #5 (permalink)  
Старый 05.09.2017, 13:59
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,745

Сообщение от maxg5
Easy Modal это не библиотека, а плагин для WordPress.
И поэтому он обязан поддерживать любые методы?

Сообщение от Nexus
Тут ты пишешь про Easy Modal, а в коде вызываешь Bootstrap'овский (если не ошибаюсь) метод «modal» с аргументом 'hide'.
Смотри документацию к своему плагину и применяй его методы.


Ну или так:
$('.eModal-1').hide();
Ответить с цитированием
  #6 (permalink)  
Старый 05.09.2017, 14:11
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 89

Nexus,
Сообщение от Nexus
$('.eModal-1').hide();
Так к сожалению не работает.
Сообщение от Nexus
Смотри документацию к своему плагину и применяй его методы.
Я этот скрипт нашел на стороннем форуме. Там у человека тоже был Easy Modal+Contact Form 7. У него все работало. Получается с методами все в порядке. А ошибка в том что я не правильно применяю скрипт к своему случаю.
Не понятно какие селекторы нужно передавать в строках 1, 13, 19, 20
Ответить с цитированием
  #7 (permalink)  
Старый 05.09.2017, 14:32
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,745

Сообщение от maxg5
Так к сожалению не работает.
Значит ошибка может быть в следующем:
1. Запрос вовсе не отправляется к серверу;
2. Запрос фейлится;
3. В этой строке ошибка: document.forms['.wpcf7-form sent'].reset();
4. Элемента с классом «.eModal-1» нет на странице.

Я бы пункт 3 сначала смотрел, там вообще хрень какая-то написана.
https://learn.javascript.ru/form-elements

И если используешь jQ, то почему не использовать его всегда?
$('.wpcf7-form.sent').get(0).reset();


PS. в консоли браузера много интересных вещей пишется, она открывается по нажатию на клавишу F12, вкладка «Console».
Ответить с цитированием
  #8 (permalink)  
Старый 05.09.2017, 15:37
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 89

Nexus,
Сообщение от Nexus
Элемента с классом «.eModal-1» нет на странице.
Вроде бы есть элемент с классом .eModal-1 - 266 строка.
<p><a href="#" class="eModal-1"><img  class="but" src="/wp-content/themes/clinico/img/but.png" /></a></p>

Это получается класс для вызова модального окна.
$('.wpcf7-form.sent').get(0).reset();

Здесь нужно использовать селектор .wpcf7-form.sent или #4018? это не совсем понятно. #4018 - так именуется нужная форма в шорт коде для WordPress. А .wpcf7-form.sent есть в коде страницы.
Переписал код используя везде jQ.
<script>
jQuery('#4018').submit(function() {
  $.ajax({
    type   : 'POST',
    url: $ajax_url,
    data : {
      name: $name_value ,
      email: $email_value,
      message: $message_value,
      subject: $subject_value,
      task: 'sendmail'
    },
    beforeSend: function(data){
      jQuery('#submit').before('');
},    success: function (data){
      jQuery('.loading').fadeOut(function(){
        jQuery(this).remove();
      }); //прячется gif-ка какая-нибудь
      setTimeout(function(){
      jQuery('#4018').get(0).reset(); // очищается форма методом .reset()
      jQuery('.eModal-1').hide();
      }, 2000); // здесь закрывается модальное окно через 3 секунды
    },
    complete:function(data){
     $form.each(function(){
      this.reset();  // или так очищается форма методом .reset()
    });
    },
  });
  return false;
});
</script>

В консоль смотрел. Касательно данного скрипта ошибок нету.
Ответить с цитированием
  #9 (permalink)  
Старый 05.09.2017, 15:54
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,745

maxg5, перепиши свой код так, отправь форму и смотри, что в консоль пишется.
function _log(){
	console.log.apply(console,arguments);
}

_log($('#4018').size()?'Form found':'Form not found');
jQuery('#4018').submit(function() {
	_log('Form. Submit');
    
	$.ajax({
        type: 'POST',
        url: $ajax_url,
        data: {
            name: $name_value,
            email: $email_value,
            message: $message_value,
            subject: $subject_value,
            task: 'sendmail'
        },
        beforeSend: function(data) {
            _log('Ajax. BeforeSend');
			jQuery('#submit').before('');
        },
        success: function(data) {
			_log('Ajax. Success');
			
            jQuery('.loading').fadeOut(function() {
                jQuery(this).remove();
            }); //прячется gif-ка какая-нибудь
			
            setTimeout(function() {
				_log('Ajax. Success timeout');
				_log('Modal object',$('.eModal-1'));
				
                jQuery('#4018').get(0).reset(); // очищается форма методом .reset()
                jQuery('.eModal-1').hide();
            }, 2000); // здесь закрывается модальное окно через 3 секунды
        },
        complete: function(data) {
			_log('Ajax. Complete');
			
            $form.each(function() {
                this.reset(); // или так очищается форма методом .reset()
            });
        },
    });
	
    return false;
});


Сообщение от maxg5
Здесь нужно использовать селектор .wpcf7-form.sent или #4018? это не совсем понятно. #4018 - так именуется нужная форма в шорт коде для WordPress. А .wpcf7-form.sent есть в коде страницы.
$('#4018');//Поиск элемента с id="4018"
$('.wpcf7-form.sent');//Поиск элемента с class*="wpcf7-form sent"

Если на странице нет элемента с id 4018, то нужно использовать поиск по классу.

Последний раз редактировалось Nexus, 05.09.2017 в 16:01.
Ответить с цитированием
  #10 (permalink)  
Старый 05.09.2017, 16:37
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 89

Nexus,
Сообщение от Nexus
перепиши свой код так, отправь форму и смотри, что в консоль пишется.
Сделал как вы сказали. В консоли пишется Form not found на 417 строку кода. Получается элемент, т.е. форма с id 4018 не найдена.
Я заменил id 4018 на .wpcf7-form.sent - в консоле так же пишется Form not found.
Получается не правильный селектор для поиска форма задан? Какой тогда селектор задавать?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
запретить перенаправление после отправки POST hi_artem AJAX и COMET 2 16.10.2011 18:41
Не работает кнопка отправки после загрузки Igor Shmigoff jQuery 2 29.12.2010 21:51
Проблема с дизайном после отправки xmlhttprequest, Проблема с дизайном после отправки cyberx AJAX и COMET 3 01.05.2010 17:07
У элемента img внутри form пропадает событие после onsubmit формы Eugene Events/DOM/Window 2 18.06.2009 19:21
Передача фокуса из формы после ввода символа kuh Общие вопросы Javascript 2 08.03.2009 19:50