?>

How to send a form to yii2 and skeeks cms via ajax?

How to send a form to yii2 and skeeks cms via ajax?

If you search on this topic, you can find various tips for the yii2 framework. All of them boil down to the fact that you need to subscribe to a specific event of the form, intercept it, cancel the standard otppavku and form ajax request with the form data yourself.

Actually, a similar approach is implemented in skeeks cms, only this component is much more difficult, it can track the status of the submission, and prevent the form from being resubmitted until the first submission is completed.

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

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

 

All Comments (0)
No Comments