?>

¿Cómo enviar un formulario a yii2 y skeeks cms via ajax?

¿Cómo enviar un formulario a yii2 y skeeks cms via ajax?

Si busca este tema, puede encontrar varios consejos para el marco yii2. Todos ellos se reducen al hecho de que necesita suscribirse a un evento específico del formulario, interceptarlo, cancelar el otppavku estándar y la solicitud de ajax de formulario con los datos del formulario.

En realidad, un enfoque similar se implementa en skeeks cms, solo que este componente es mucho más difícil, puede rastrear el estado de la presentación y evitar que se vuelva a enviar el formulario hasta que se complete la primera presentación.

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

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

 

todos los comentarios (0)
Sin comentarios