Как отправить форму в yii2 и skeeks cms через ajax?

Если поискать на эту тему, то можно найти различные советы для yii2 фреймворка. Все они сводятся к тому, что нужно подписаться на определенное событие формы, перехватить его, отменить стандартную отрпавку и сформировать ajax запрос с данными формы самостоятельно.

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

Исходный код:

https://github.com/skeeks-cms/cms/blob/master/src/assets/src/classes/active-form/AjaxSubmit.js

Пример:

<?php $form = \skeeks\cms\base\widgets\ActiveFormAjaxSubmit::begin([
                'action' => Url::to('/module/controller/action'),
                'validationUrl' => Url::to('/module/controller/validate-action'),
                'clientCallback' => <<<JS
    function(ActiveFormAjaxSubmit)
    {
        ActiveFormAjaxSubmit.on('start', function(e, data)
        {
            console.log('Начало отправки, как только человек кликнул на кнопку или отправил форму');
        });

        ActiveFormAjaxSubmit.on('afterValidate', function(e, data)
        {
            console.log('Валидация завершилась, если ок, то начинается отправка ajax если нет, то появится событие error');
        });

        ActiveFormAjaxSubmit.on('error', function(e, data)
        {
            alert(data.message);
        });

        ActiveFormAjaxSubmit.on('success', function(e, data)
        {
            console.log('Форма отправлена успешно');
            alert("Успешно отправлена");
        });

        ActiveFormAjaxSubmit.on('stop', function(e, data)
        {
            console.log('Процесс отправки завершен');
        });

    }
JS

            ]); ?>
    <?= $form->field($model, 'email') ?>

    <div class="form-group">
        <?= Html::submitButton("<i class=\"glyphicon glyphicon-off\"></i> Зарегистрироваться", ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
    </div>

<?php \skeeks\cms\base\widgets\ActiveFormAjaxSubmit::end(); ?>

 

Js класс ActiveFormAjaxSubmit = sx.classes.activeForm.AjaxSubmit​

Вот все возможные события, на которые возможно подписаться:

/**
 * @event start начало отправки формы
 * @event stop завершение отправки формы
 *
 * @event success успешная отправка произведена
 * @event error ошибки, может валидация, может ajax, может ошибка данных
 *
 * @event afterValidate перед началом отправки ajax, после валидации в том числе и неудачной валидации
 *
 * @event validateAjaxComplete
 * @event validateAjaxError
 *
 * Отправка формы через ajax
 */
sx.classes.activeForm.AjaxSubmit = sx.classes.Component.extend({

Еще ряд примеров работы с объкетом ActiveFormAjaxSubmit 

//Можно обратиться к объекту AjaxQuery и подписаться на его события
ActiveFormAjaxSubmit.AjaxQuery
    .done(function(e) {
        alert('ajax запрос успешно отработал')
    })
    .fail(function(e) {
        alert('Ошибка отправки ajax запроса')
    })
    .always(function(e) {
        alert('Закончилась работа ajax запроса')
    })
;

 

jQuery объект отправляемой формы можно получить так:

ActiveFormAjaxSubmit.jForm

https://github.com/skeeks-cms/cms/blob/master/src/assets/src/classes/active-form/AjaxSubmit.js