Yii2 - 提交前的警告信息

Yii2 - warning message before submit

我有一个包含两个字段 "a" 和 "b" 的表单,如果 "b" 字段将 "beforeSubmit" 事件更改为模态 Bootstrap在没有任何按钮 OKCANCEL 的情况下向用户发送警报,仅在 5 秒内发送信息,在此时间之后如果 "b" 字段实际更改则自动保存,如果没有更改则保存警报模式 windows。

如何从控制器发送此条件以查看 javascript 的位置? 也许 ajax?但是如何呢?

Controller.php

public function actionUpdate()
    {
        $model = new Faqs();

        if ($model->load(Yii::$app->request->post()) && $model->save()) {

            if ($model->oldAttributes["b"] != $model->b){
                sleep(5);
            }

            return $this->redirect(['view', 'id' => $model->id]);
        } else {
            return $this->render('update', [
                'model' => $model,
            ]);
        }
    }

_form.php

$('#form').on('beforeSubmit', function(e) {
    if(old_B_attribute != current_B_attribute){ //example
        $('#modal').modal('show');
    }
});

你的请求不能在客户端完成beforeSubmit.Because你必须在服务器端决定。

在客户端你可以使用

$(document).on("beforeValidate", "form", function(event, messages, deferreds) {
//   #code
// console.log('BEFORE VALIDATE TEST');
}).on("afterValidate", "form", function(event, messages, errorAttributes) {
// console.log('AFTER VALIDATE TEST');
 //#code
});

然后在规则方法中决定。

在服务器端,您还可以决定以下事件:(为您所愿) beforeValidate, afterValidate,beforeSave,afterSave,...

您想在提交表单之前提示用户属性值是否实际更改。

我会怎么做

  • 在我的控制器中创建一个单独的操作 actionAttributeDirty() 以验证所选属性是否实际更改。
  • 然后,使用正常的 Html::button() 而不是 Html::submitButton() 作为表格。
  • 添加一个隐藏字段来保存表单中的当前记录id
  • click 事件绑定到按钮,该按钮将使用当前记录的 idactionAttributeDirty() 发送 ajax 调用。
  • 然后使用success函数显示模态window并使用setTimeout$.yiiActiveForm('submitForm')5秒后触发表单提交

所以按照上面给出的类似顺序,

actionAttributeDirty

public function actionAttributeDirty()
{
    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    $id = Yii::$app->request->post('id');
    $model = Faqs::findOne($id);
    $response = ['changed' => false];
    $isValidRequest = Yii::$app->request->isAjax && Yii::$app->request->isPost;

    if ($isValidRequest && $model->load(Yii::$app->request->post())) {
        //get the name of the fields from the dirty attributes
        $changedAttributes = array_keys($model->getDirtyAttributes());

        //if the attribute name exists in the dirty attributes
        if (!empty($changedAttributes) && in_array("b", $changedAttributes)) {
            $response['changed'] = true;
        }
    }
    return $response;
}

您的表单应包含以下按钮以及其他字段,

$form = \yii\widgets\ActiveForm::begin(['id' => 'form']);
echo \yii\helpers\Html::hiddenInput('id', $model->id);
echo \yii\helper\Html::button('save', ['id' => 'save-now']);
\yii\widgets\ActiveForm::end();

click 按钮事件

在您的视图顶部有表单的地方添加以下内容。

注意:相应地更改 ajax 调用 '/site/attribute-dirty'url,在您复制 actionAttributeDirty() 的位置我假设您在网站内复制它控制器.

$js = <<< JS
    $('#save-now').on('click', function(e) {
        e.preventDefault();
        let form = $("#form");

        $.ajax({
            url:'/site/attribute-dirty',
            method:'post',
            data:form.serialize(),
        }).done(function(response){
            if(response.changed){
                $('#modal').modal('show');
                setTimeout(function(){form.yiiActiveForm('submitForm');}
                , 5000);
            }else{
                form.yiiActiveForm('submitForm');
            }

        }).fail(function(response){
            console.log(response.responseText);
        });
    });
JS;

$this->registerJs($js, \yii\web\View::POS_READY);

编辑

Enter按钮无论如何都不会提交表单,因为没有提交按钮,如果你想按Enter按钮提交表单您应该在视图顶部添加以下内容以及脚本,这将在按下 Enter 按钮时触发 save-now 按钮的 click 事件在任何输入中。

$("#form").on('keypress','input',function(e){
    e.preventDefault();
    if(e.keyCode===13){
        $("#save-now").trigger('click');
    }
});

如果你想显示确认模式,我使用如下。您可以根据需要进行更改显示或隐藏x秒后提交

  $(function() {
    submitting = false;
  });

  $("form").on("beforeSubmit", function (event, messages, errorAttributes) {
    if (typeof(errorAttributes) === "undefined" || errorAttributes.length === 0) {
      $('#modal-confirm').modal('show');
      return submitting;
    }
  });

  var submit = function() {
    submitting = true;
    $("form").yiiActiveForm('submitForm');
  }

模式提交

  <button type="button" onclick="submit();">Confirm</button>