问如何让ajax更新和ajax验证在Yii2中协同工作？
EN

Stack Overflow用户

提问于 2021-10-10 01:49:40

回答 1查看 29关注 0票数 0

我有一个带有GridView的页面，我希望可以在不重新加载页面的情况下编辑数据。GridView结构是基本的。当我单击该按钮时，我将表单上传到模式窗口，然后跟踪表单提交事件。数据会正确更改，但ajax验证不起作用。

ActiveForm

    <?php $form = ActiveForm::begin([
        'id' => 'update-form',
        'action' => Url::to(['/product/ajax-update', 'wbId' => $model->wbId]),
        'validationUrl' => Url::to(['/product/ajax-validate', 'wbId' => $model->wbId]),
        'enableAjaxValidation' => true,
        'validateOnChange' => true,
        'method' => 'post',
    ]); ?>

    <?= $form->field($model, 'wbId') ?>
    <?= $form->field($model, 'supplierArticle') ?>
    <?= $form->field($model, 'costPrice') ?>
    <?= $form->field($model, 'accountName') ?>

    <?php ActiveForm::end(); ?>

验证规则

    public function rules()
    {
        return [
            [['wbId', 'supplierArticle', 'costPrice', 'createDate'], 'required'],
            [['wbId'], 'integer'],
            [['costPrice'], 'number'],
            [['createDate', 'updateDate'], 'safe'],
            [['supplierArticle'], 'string', 'max' => 100],
            [['accountName'], 'string', 'max' => 50],
            [['wbId'], 'unique'],
        ];
    }

载荷模态形式函数

    public function actionLoadForm()
    {
        Yii::$app->response->format = Response::FORMAT_JSON;

        if (Yii::$app->request->isAjax)
        {
            $wbId = Yii::$app->request->post('wbId');

            if ($wbId)
            {
                $product = Product::find()->where(['wbId' => $wbId])->one();

                if ($product)
                {
                    return [
                        'success' => true,
                        'render' => $this->renderPartial('parts/form', [
                            'model' => $product
                        ])
                    ];
                }
            }
        }

        return false;
    }

Ajax更新函数

    public function actionAjaxUpdate($wbId)
    {
        Yii::$app->response->format = Response::FORMAT_JSON;

        if (Yii::$app->request->isAjax)
        {
            /* @var $model Product */
            $model = Product::find()->where(['wbId' => $wbId])->one();

            if ($model)
            {
                if ($model->load(Yii::$app->request->post()) && $model->validate())
                {
                    if ($model->save())
                    {
                        return [
                            'success' => true
                        ];
                    }
                }
            }
        }
        
        return [
            'success'=> false
        ];
    }

Ajax验证

    public function actionAjaxValidate($wbId)
    {
        Yii::$app->response->format = Response::FORMAT_JSON;

        if (Yii::$app->request->isAjax)
        {
            /* @var $model Product */
            $model = Product::find()->where(['wbId' => $wbId])->one();

            if ($model->load(Yii::$app->request->post()))
            {
                return ActiveForm::validate($model);
            }
        }

        return false;
    }

Js - load表单

 $(document).on('click', updateItemButton, function (e)
    {
        let wbId = $(this).closest('tr').data('key');

        $(updateModal).modal('show');

        $.ajax({
            type: "POST",
            url: "/product/load-form",
            dataType: "json",
            cache: false,
            data: {
                "wbId": wbId
            },
            success: function (response)
            {
                if (response.success)
                {
                    $(updateModal_content).html(response.render);
                }
                else
                {
                    console.log(response);
                }
            },
            error: function (response)
            {
                console.log(response);
            }
        });

        e.preventDefault();
    });

Js -提交-表单

$(document).on('submit', updateModal_form, function (e)
    {
        e.preventDefault();

        let formData = $(this).serializeArray();

        $.ajax({
            type: "POST",
            url: $(this).attr('action'),
            dataType: "json",
            cache: false,
            data: formData,
            success: function (response)
            {
                console.log(response);
            },
            error: function (response)
            {
                console.log(response);
            }
        });
    });