?>

Wie sendet man ein Formular über Ajax an yii2 und skeeks cms?

Wie sendet man ein Formular über Ajax an yii2 und skeeks cms?

Wenn Sie zu diesem Thema suchen, finden Sie verschiedene Tipps für das yii2-Framework. Alle laufen darauf hinaus, dass Sie ein bestimmtes Ereignis des Formulars abonnieren müssen, abfangen, den Standard otppavku abbrechen und eine Ajax-Anforderung mit den Formulardaten selbst erstellen.

Ein ähnlicher Ansatz wird in skeeks cms implementiert. Nur diese Komponente ist viel schwieriger. Sie kann den Status der Übermittlung verfolgen und verhindern, dass das Formular erneut übermittelt wird, bis die erste Übergabe abgeschlossen ist.

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

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

 

Alle Kommentare (0)
Keine Kommentare