Yii2 активная форма, пожалуйста, подождите сообщение при отправке с ajax

Question

Yii2 активная форма, пожалуйста, подождите сообщение при отправке с ajax

Я использую расширенный шаблон Yii2 и ищу способ отображения диалогового окна с сообщением «Пожалуйста, подождите …» при отправке формы входа на сервер.

Вот мой код активной формы:

            <?php $form = ActiveForm::begin([
'id' => $model->formName(),
'enableAjaxValidation' => true,
]); ?>
<fieldset>

<?= $form->field($model, 'username', [
'inputOptions' => [
'placeholder' => $model->getAttributeLabel('username'),
],
])->label(false); ?>

<?= $form->field($model, 'password', [
'inputOptions' => [
'placeholder' => $model->getAttributeLabel('password'),
],
])->label(false)->passwordInput() ?>

<?= $form->field($model, 'rememberMe')->checkbox() ?>

<?= Html::submitButton('Login', ['class' => 'btn btn-lg btn-success btn-block', 'name' => 'login-button']) ?>
</fieldset>
<?php ActiveForm::end(); ?>

И мои действия на стороне сервера:

public function actionLogin()
{
if (!\Yii::$app->user->isGuest) {
return $this->goHome();
}

$model = new LoginForm();
if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {
Yii::$app->response->format = Response::FORMAT_JSON;
return ActiveForm::validate($model);
}
if ($model->load(Yii::$app->request->post()) && $model->login()) {
return $this->goBack();
} else {
return $this->render('login', [
'model' => $model,
]);
}
}

Я успешно проверяю входные данные / отправляю форму, но мне нужно отобразить диалоговое окно, поэтому, если соединение медленное, пользователь получит представление о том, что форма на самом деле отправляет и ему нужно больше времени для завершения.

1

active-form ajax dialog php yii2

Решение

Другие решения

Пожалуйста, используйте следующее решение javascript, чтобы прослушать «перед отправкой»

$('body').on('beforeSubmit', 'form#yourFormId', function() {
$('#loading').show(); //show the loading div
var form = $(this);

$.ajax({
url: form.attr('action'),
type: 'post',
data: form.serialize(),
success: function(data) {
// do processing of data
$('#loading').hide(); //hide it
}
});

return false;

});

Вам нужно будет добавить div с загрузкой идентификатора и использовать для этого подходящий css

<div id='loading'> Loading ... </div>

Добавление кнопки закрытия maunal к этому разделу также рекомендуется для случаев с колебаниями сети

0

Источник

Accepted Answer

За ActiveForm вам нужно использовать в соответствии с событиями. В настоящее время это управляется с помощью Javascript (см. официальная информация об обновлении).

$('#myform').on('ajaxBeforeSend', function (event, jqXHR, settings) {
// Activate waiting label
}).on('ajaxComplete', function (event, jqXHR, textStatus) {
// Deactivate waiting label
});

Вот более подробная информация об этих двух событиях.

ajaxBeforeSend:

Событие ajaxBeforeSend запускается перед отправкой запроса AJAX для
Проверка на основе AJAX.

Подпись обработчика события должна быть:

функция (событие, jqXHR, настройки)

где

событие: объект события.

jqXHR: объект jqXHR

настройки: настройки для запроса AJAX

ajaxComplete:

Событие ajaxComplete запускается после завершения запроса AJAX для
Проверка на основе AJAX. Подпись обработчика события должна быть:

функция (событие, jqXHR, textStatus)

где

событие: объект события.

jqXHR: объект jqXHR

textStatus: состояние запроса («успех», «немодифицированный», «ошибка», «тайм-аут», «прерывание» или «parsererror»).

Также проверьте это расширение, возможно это будет полезно для этой цели.

6