
Если поискать на эту тему, то можно найти различные советы для 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
-
Семенов Александр
- /
- Apr 18, 2019
- /
- 0
- /
- 9190
Popular
Релиз SkeekS CMS 5.5.11 работает с yii2 2.0.24
- Aug 13, 2019
Как отправить форму в yii2 и skeeks cms через ajax?
- Apr 18, 2019
All Comments (0)