MODX REVO AjaxForm как сделать что бы при отправке показывалось слово ОТПРАВКА....?

Question

[Cheizer]

Друзья, кто знаком с AjaxForm в MODX? Которая отправляет AJAXом формы на сайте. Подскажите пожалуйста, как сделать что бы при отправке письма показывать какую нибудь анимацию или слово ОТПРАВКА....

Пытаюсь как то отловить af_complete статус sucess, но блин, он всегда возникает только ПОСЛЕ ОТПРАВКИ формы, а нужно сам процесс отправки, когда форма пару секунд думает перед получением ответа сервера. Как отловить этот момент что бы повесить на него анимацию, это я уже легко сделаю, не знаю на какое событие его вешать, памагитиииии!!!!

Вот как делаю, но не получается так толком ничего, это не правильное направление :(

$(function() { 

$(document).on('af_complete', function(event, response) {

console.log(response);

if(response.success != false && response.success != ''){
$(".loader").css('display','block');
}
});
  
});

Comments

[Степан]

Вам удалось решить задачу??

[Cheizer]

Степан, не помню уже что конкретно было, но помню точно что решил, код такой у меня смотрю стоит на том сайте, это внизу страницы после всего.

$(document).on('af_complete', function(event, response) {

var form = response.form;
response.message='';

if (response.success) { 

var fid = form.attr('id');
console.log(fid);
 
var su = $(".success", form);
showFu(su);
function showFu(su){
su.slideDown(function () {
     setTimeout(function () {
      su.slideUp()
     }, 6000)
  })
}  

}
});

[Cheizer]

Степан, А вот файл прпаил который в сниппете /assets/components/ajaxform/js/default.js
Обратите внимание на form.find('.loader').hide(); в SUCCESS

var AjaxForm = {

    initialize: function (afConfig) {
        if (!jQuery().ajaxForm) {
            document.write('<script src="' + afConfig['assetsUrl'] + 'js/lib/jquery.form.min.js"><\/script>');
        }
        if (!jQuery().jGrowl) {
            document.write('<script src="' + afConfig['assetsUrl'] + 'js/lib/jquery.jgrowl.min.js"><\/script>');
        }

        $(document).ready(function () {
            $.jGrowl.defaults.closerTemplate = '<div>[ ' + afConfig['closeMessage'] + ' ]</div>';
        });

        $(document).off('submit', afConfig['formSelector']).on('submit', afConfig['formSelector'], function (e) {
            $(this).ajaxSubmit({
                dataType: 'json',
                data: {pageId: afConfig['pageId']},
                url: afConfig['actionUrl'],
                beforeSerialize: function (form) {
                    form.find(':submit').each(function () {
                        if (!form.find('input[type="hidden"][name="' + $(this).attr('name') + '"]').length) {
                            $(form).append(
                                $('<input type="hidden">').attr({
                                    name: $(this).attr('name'),
                                    value: $(this).attr('value')
                                })
                            );
                        }
                    })
                },
				

                beforeSubmit: function (fields, form) {

                    //noinspection JSUnresolvedVariable
                    if (typeof(afValidated) != 'undefined' && afValidated == false) {
                        return false;
                    }
                   // form.find('.error').html('');
                   // form.find('.error').removeClass('error');
                   // form.find('input,textarea,select,button').attr('disabled', true);
				    form.find('button').attr('disabled', true);
					form.find('.loader').show();
					

                    return true;
					 
                },
                success: function (response, status, xhr, form) {
					
					form.find('.loader').hide();
					form.find('button').attr('disabled', false);
                    //form.find('input,textarea,select,button').attr('disabled', false);

                    response.form = form;
                    $(document).trigger('af_complete', response);
                    if (!response.success) {
                        AjaxForm.Message.error(response.message);
                        if (response.data) {
                            var key, value, focused;
                            for (key in response.data) {
                                if (response.data.hasOwnProperty(key)) {
                                    if (!focused) {
                                        form.find('[name="' + key + '"]').focus();
                                        focused = true;
                                    }
                                    value = response.data[key];
                                    form.find('.error_' + key).html(value).addClass('error');
                                    form.find('[name="' + key + '"]').addClass('error');
                                }
                            }
                        }
                    }
                    else {
						
						
                        AjaxForm.Message.success(response.message);
                        form.find('.error').removeClass('error');
                        form[0].reset();
                        //noinspection JSUnresolvedVariable
                        if (typeof(grecaptcha) != 'undefined') {
                            //noinspection JSUnresolvedVariable
                            grecaptcha.reset();
                        }
                    }
                }
            });
            e.preventDefault();
            return false;

        });
		


        $(document).on('keypress change', '.error', function () {
            var key = $(this).attr('name');
            $(this).removeClass('error');
            $('.error_' + key).html('').removeClass('error');
        });

        $(document).on('reset', afConfig['formSelector'], function () {
            $(this).find('.error').html('');
            AjaxForm.Message.close();
        });
    }

};


//noinspection JSUnusedGlobalSymbols
AjaxForm.Message = {
    success: function (message, sticky) {
        if (message) {
            if (!sticky) {
                sticky = false;
            }
            $.jGrowl(message, {theme: 'af-message-success', sticky: sticky});
        }
    },
    error: function (message, sticky) {
        if (message) {
            if (!sticky) {
                sticky = false;
            }
            $.jGrowl(message, {theme: 'af-message-error', sticky: sticky});
        }
    },
    info: function (message, sticky) {
        if (message) {
            if (!sticky) {
                sticky = false;
            }
            $.jGrowl(message, {theme: 'af-message-info', sticky: sticky});
        }
    },
    close: function () {
        $.jGrowl('close');
    },
};

[Cheizer]

Степан, а вот форма

<form id="form-index-1" class="ajax_form arctform" method="post" action="" novalidate="novalidate">
                        
                        <input type="hidden" name="title" value="ЗАПРОС ПРЕДЛОЖЕНИЯ">
                      <input type="hidden" name="clab" value="">
                      <input type="hidden" name="url" value="http://sport.........ru">
                        <div class="success_wrapper">
                            <div class="success" style="display: none;">
                                <strong>ЗАЯВКА ОТПРАВЛЕНА!</strong>
                                <br>Мы свяжемся с Вами в ближайшее время!
                            </div>
                        </div>

                        <div class="flex-box">

                            <div class="item-form">
                                <label>
                                     <input type="text" name="name" value="" placeholder="ИМЯ" class="form-control valid">
                                    <span class="valid">*</span>
                                </label>
                            </div>

                            <div class="item-form">
                                <label>
                                    <input type="email" class="form-control valid" name="email" value="" placeholder="E-MAIL">
                                    <span class="valid">*</span>
                                 </label>
                            </div>

                            <div class="item-form">
                                <label>
                                    <input type="text" class="phone_client form-control valid" name="phone" value="" placeholder="ТЕЛЕФОН">
                                    <span class="valid">*</span>
                                </label>
                            </div>

                            <div class="item-form">

                                <select class="clab form-control" style="display: none;">
                                    <option value="">КЛУБ</option>
   <option value="">Москва, м. Люблино</option><option value="">Москва, м. Лермонтовский пр-т</option><option value="">Тула, ул. Фрунзе, д. 3А</option>
                                </select><div class="nice-select clab form-control" tabindex="0"><span class="current">КЛУБ</span><ul class="list"><li data-value="" class="option selected focus">КЛУБ</li><li data-value="" class="option">Москва, м. Люблино</li><li data-value="" class="option">Москва, м. Лермонтовский пр-т</li><li data-value="" class="option">Тула, ул. Фрунзе, </li></ul></div>
                            </div>
                        </div>
<div class="loader" style="display: none;">
<div class="spinner">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div> 
</div>
                        <div class="button">
<button type="submit" class="item-form text-center theme-button">ПОЛУЧИТЬ ПРЕДЛОЖЕНИЯ</button>

                        </div>
                        
                    
	<input type="hidden" name="af_action" value="fc5e07f08797f5d2b81dcc3dd154cd1b">
<input type="hidden"></form>

[Cheizer]

Степан, править нужно только JS и HTML+CSS сам снипет не трогал по моему.

[Степан]

Роман Кузнецов, Спасибо большое!

Answer 1

[Виктор Янышев]

Читай о readyState

Comments

[Cheizer]

Почитал, интересно, но у меня нет доступа к AJAX функции, это MODX и сниппет использую для отправки,

А readyState вешается на AJAX функцию как я понял

var xhr = $.ajax({ ... });
xhr.onreadystatechange = function() { alert(xhr.readyState); };

[Виктор Янышев]

Роман Кузнецов, сниппет это все лишь обёртка над ajax. Расширить можешь сам https://docs.modx.pro/components/ajaxform

[Cheizer]

Виктор Янышев, спасибо, но все это первым делом смотрел, там нет решения моей проблемы :( даже упоминания

[Виктор Янышев]

&frontend_js

[Cheizer]

Виктор Янышев, о да, я вчера весь этот документ перекопал, оч помогло решить другую задачу, там все автор вешает на FORM.

https://github.com/bezumkin/AjaxForm/blob/master/a...

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

Там то в принципе и негде больше использовать его, в SUCESS не подходит, так как это уже после отправки, остается beforeSubmit

beforeSubmit: function (fields, form) {
                    //noinspection JSUnresolvedVariable
                    if (typeof(afValidated) != 'undefined' && afValidated == false) {
                        return false;
                    }
                    form.find('.error').html('');
                    form.find('.error').removeClass('error');
                    form.find('input,textarea,select,button').attr('disabled', true);

                   form.find('.loader').show(); // мой код

                    return true;
                },

Вот использую строку там form.find('.loader').show(); // мой код но это тоже не то место, это ДО ОТПРАВКИ а не в момент, поэтому loader появляется не к месту, когда не заполнил поля и просто кликнул по кнопке отправить, пока не могу понять куда там встроить это :(

Есть еще знаю beforeSend: событие у AJAX, пытался добавить эту функцию там, но она вообще там не работает почему то :( какой то там нестандартный вызов AJAX.