Как правильно сделать окно спасибо ajaxFrom?

Здравствуйте. Подскажите пожалуйста, как правильно закрывать всплывающее окно и открывать свое окно спасибо, которое будет через несколько секунд закрываться или по кнопке?

<script>
    $(document).on('af_complete', function(event, response) {
    if (response.success) {
        $('.fancybox-container').hide();
        $('body').removeClass('fancybox-active compensate-for-scrollbar');
    }
});
</script>

Вот так я делаю. Но у меня окно «Спасибо» это костылями стилизованный jGrowl, а как вызвать после успешной отправки формы мое окно спасибо к примеру с таким id=«Thanks»?

Виталий

07 декабря 2018, 11:23

1 898

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

Александр Мельник

07 декабря 2018, 11:35

Вы используете ajaxForm для обертки formit?
Разве ajaxForm не показывает в случае успешной отправки формы свое уведомление jGrowl?
Просто пропишите у вызова ajaxForm текст сообщения при успехе, ну то есть ваше спасибо и вы увидите это сообщение и оно пропадет само — все как вы хотите.

Я обычно поступаю так. Копирую основной файл js для ajaxForm, указываю в вызове ajaxForm путь к новому файлу.
Чтобы закрыть в случае успеха окно fancybox в разделе файла, который отвечает за действия в случае успеха просто имитирую клик по крестику на окне fancybox. Это позволит не делать несколько действий как у вас — не скрывать не контейнер, не удалять классы из body. А после этого ajaxForm сам запустит jGrowl и сам его уберет.

Виталий

07 декабря 2018, 11:41

Ну да ajaxFrom. Как-то у вас запутано, сможете более детально показать? Да мой вариант не идеальный, но почему-то только так закрывается сессия fancybox.

Александр Мельник

07 декабря 2018, 11:53

docs.modx.pro/komponentyi/ajaxform
параметр сниппета frontend_js позволяет указать путь к своему файлу.
Копируем родной файл компонента, чтобы при обновлении компонента не сломался функционал.
Указываем при вызове сниппета ajaxForm путь к своему файлу.
Находим в файле ту часть, которая описывает действия в случае успешной отправки формы.
Предварительно смотрим, какие css классы имеет крестик, закрывающий модальное окно fancybox
В принципе можно вместо крестика воспользоваться оверлеем fancybox, ведь клик по нему мышью так же закрывает окно.
В нашем js файле имитируем клик по крестику или оверлею.
Если при вызове сниппета указать свой текст сообщения для успешной отправки то произойдет следующее
— форма отправляется.
— закрывается окно fancybox
— показывается уведомление jGrowl
— закрывается уведомление

Виталий

07 декабря 2018, 12:14

Спасибо, но все же не то)

<script>
$(document).on('af_complete', function(event, response) {
    var form = response.form;
    // Если у формы определённый id
    if (form.attr('id') == 'callback-form') {
        // Скрываем её!
        $('.fancybox-close-small').click(function(){
            $.fancybox.close();
        });
    }
    // Иначе печатаем в консоль весь ответ
    else {
        console.log(response)
    }
});
</script>

В консоли ответ есть, но само окно не закрывается. В общем вообще не то.

Александр Мельник

07 декабря 2018, 12:22

Ну не то, так не то.
Но все же давайте еще разок, мне кажется вы спешите.
Во первых по вашему коду — раз вы получаете ответ в консоль — значит выполнилась часть условия после ИНАЧЕ, а это значит что первая часть не выполнилась. Так как же может закрыться окно, ведь этот код не выполняется.
Во вторых, имеет ли смысл проверять идентификатор формы, чтобы закрыть модальное окно. Но это конечно дело вкуса.
Ну и третье — я ведь писал совсем о другом. Я говорил что нужно скопировать и доработать основной файл ajaxForm.js

Виталий

07 декабря 2018, 13:01

Ваш вариант какой-то совсем другой в плане подхода, с пол оборота не понять(( Возможно он лучше от того что я хочу сделать.

Андрей

07 декабря 2018, 12:30

Ajax форма обратной связи для MODX — вот здесь всё хорошо расписано.

Либо если открывать вторую модалку, можно как то так сделать:

if (response.success) {
    $.fancybox.open({
    	src  : '#thanks',
    	type : 'inline'
    });
}

Виталий

07 декабря 2018, 12:59

Спасибо. Вот такое нагородил, есть вариант как-то это лучше сделать?

<script>
    $(document).on('af_complete', function(event, response) {
    if (response.success) {
        $.fancybox.close({
        	src  : '#callback-form',
        	type : 'inline'
        });
        $.fancybox.open({
        	src  : '#thanks',
        	type : 'inline'
        });
        setTimeout(function(){$.fancybox.close();}, 2000);
    }
});
</script>

Андрей

07 декабря 2018, 13:13

«Работает? Не трогай» © =)

По сабжу, я делаю как в статье по ссылке описано, всё в одной модалке, и форма и блок успешной отправки. Во первых не надо городить несколько модалей, лишний код, ну и окна которые исчезают сами не очень люблю =)

Виталий

07 декабря 2018, 13:47

Согласен) Но хочется сделать наиболее рабочий способ. Да в статье вроде нормально все расписано, а можете показать как вы делаете, уверен что уже переделали достаточно с учетом всех багов. Можно в личку.

Андрей

07 декабря 2018, 15:09

Да почти также как в статье и делаю =) Сама форма:

<div style="display: none;" id="calc-form">
        {'!ajaxForm' | snippet : [
            ...params...    
        ]}

	<div id="success-response" style="display: none;">
	    <h3 class="form-title">Ваша заявка успешно отправлена.</h3>
	    <p>Мы свяжемся с вами в ближайшее время!</p>
	    <p><a href="#" id="onemore-feedback">Отправить</a> еще сообщение.</p>
	</div>
</div>

Скрипт:

$(document).on('af_complete', function(event, response) {
    if (response.success) {
        response.form.hide();
        $("#success-response").fadeIn(700);
    }
    response.message=''; //отключает вывод jGrowl
});

$(document).on('click', '#onemore-feedback', function(e) {
    $("#success-response").fadeOut();
    $("#order-form").fadeIn(); // это id самой формы.
    e.preventDefault();
});

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