如何使ajax更新和ajax验证在Yii2一起工作?

Question

我有一个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 form

$(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 - submit-form

$(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);
}
});
});

验证事件根本不触发。在更改数据或提交表单时不会。如果输入了不正确的数据，请求将被发送到ajax-update，服务器返回一个空响应(因为没有通过验证)。如何使ajax数据保存和ajax验证一起工作?

*我想解决这个问题，而不使用pjax。

**如果你不通过ajax加载表单，一切都可以正常工作。显然问题在这里。

Answer 1

感谢michael hyn。当我渲染表单时，我只需要使用renderAjax()方法而不是renderPartial()。