modx revo FormIt Ajax

Добрый день. Пытаюсь реализовать ajax отправку писем через FormIt, но что-то, где-то пропустил. При нажатии на submit нас перекидывает на страницу формы(index.php?id=2), хотя поидее мы должны оставаться на первой странице где открыта ajax форма… Код вызова <a href="[[~2]]" class="ajax-form call" >Заказать звонок</a> JS код $(window).ready(function() { $('.ajax-form.call').on("click", function (e) { e.preventDefault(); $.ajax({ type: "POST", cache: false, url: this.href, data: $("#callback").serializeArray(), success: function (data) {

            $.fancybox(data, {

            }); // fancybox
          } // success
        }); // ajax
      }); // on
    //type: 'ajax',
    
     $(window).on('submit', 'form.popup-form', function(e){
                var formData = $('form.popup-form').serialize();
                console.log(formData);
                $.ajax({
                    url: '[[~2]]',
                    data: formData,
                    type: 'post',
                    success: processServerResponse
                })
                processServerResponse('<div style="text-align: center"><img src="assets/templates/site/images/spinner.gif" alt="загрузка" /></div>');
                e.preventDefault;
                return false;
            });
        function processServerResponse(data) {
            $('form.popup-form').html(data);
        }
     }); Код страницы формы <div class="popup popup-form" id="order" style="display:block">

	<p>Заказать звонок</p>
	[[!FormIt?
         &hooks=`spam,email`
         &emailTpl=`emailTpl`
         &redirectTo=`[[*id]]`
         &emailSubject=`Заказан звонок`
         &emailTo=`mail`
         &validate=`name:required,phone:isNumber:required`
         &errTpl=`error`
         &successMessage=`<div class="text-succes">Спасибо! Ваше письмо отправлено.</div>`
         &validationErrorMessage=`<div class="text-error">Внимание! Заполните все поля.</div>`
         &emailFrom=`mail`
         
    ]]
	<form  action="[[~[[*id]]]]" method="post" class="popup-form" id="callback">
		[[!+fi.error_message]]
        [[!+fi.successMessage]]
        [[!+fi.validation_error_message]]
		<input type="text" class="[[!+fi.error.name]]" placeholder="Имя"  name="name" value="[[!+fi.name]]">
		<input type="text" class="[[!+fi.error.phone]]"placeholder="Телефон"  name="phone" value="[[!+fi.phone]]">
		<input type="submit" value="заказать звонок">
	</form>
</div>

Про подкат не забывайте.

Какой подкат, не совсем понял, точнее вообще не поля

joxi.ru/brRDO4pfpV6y21 joxi.ru/nAyz3VMFBGbkrZ

У вас ссылка является ссылкой. Переход по ней — это нормально, учитывая, что в href= прописан адрес для перехода. Или пропишите href=«javascript:;», или в обработчике .on(«click»)… return false;

поменял сылку на такую <a onclick="return false;" href="javascript:void(0);" class="ajax-form call" >Заказать звонок</a> Но все равно, в открывшемся окне, при нажатии на «Заказать звонок» переадресовует на страницу формы на которой находится сама форма без ничего

На сколько я понимаю FormIt (сам его не юзаю) из коробки ajax не умеет… Надо писать надстройку… или не так?

Все верно. С чего бы это MODX-сущность (пхпшная) отрабатывалась на стороне браузера?

пока отложил formIt, начал делать через ajaxform

Можно через AjaxForm (который больше под это заточен). А можно и form-процессор из пакета modxSite взять и написать не сложный JS-код в несколько строк. Кому что больше нравится.

для данной задачи можно вообще обойтись без сниппетов $('#btn-order').on('click', function(e){ e.preventDefault(); var $this = $(this);

            if ($orderForm.valid()){
                $this.prop('disabled', true);
                var data = $orderForm.serialize();

                $.ajax({
                    url: 'assets/components/modxsite/connectors/connector.php',
                    method: 'post',
                    data: data,
                    success: function(data){
                        alert(data.message);
                    }
                })
                    .done(function(){
                        var $modal = $orderForm.parents('.modal');
                        $modal.modal('hide');
                        $orderForm.trigger('reset');

                    });
                $this.prop('disabled', false);
            }

        }
    ); данный js код отправляет запрос в файл. в моем случае коннектор в вашем это может обычный php файл который:
  1. разберет данные посланные ajax
  2. отправит их с помощь mail()
  3. отправит ответ.

А можно и form-процессор из пакета modxSite лучше