?>

Comment envoyer un formulaire à yii2 et skeeks cms via ajax?

Comment envoyer un formulaire à yii2 et skeeks cms via ajax?

Si vous effectuez une recherche sur ce sujet, vous pourrez trouver divers conseils pour le framework yii2. Tous se résument au fait que vous devez vous abonner à un événement spécifique du formulaire, l'intercepter, annuler la demande standard otppavku et form ajax avec les données du formulaire vous-même.

En fait, une approche similaire est mise en œuvre dans skeeks cms, seule cette composante est beaucoup plus difficile, elle permet de suivre le statut de la soumission et d’empêcher que le formulaire ne soit soumis à nouveau avant la fin de la première soumission.

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

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

 

Tous les commentaires (0)
Sans commentaires