Question

我在GridView的每一行中插入了一个activeform，如下所示：

Gridview元素：

    [
        'content' => function($model) {
            return $this->render('_departmentForm',
                [
                    'model' => $model,
                ]);
        },
    ],

表格：

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<?php $form = ActiveForm::begin(
    ['action' => ['test']]
); ?>

<?= $form
    ->field($model, 'fk_departmentID')
    ->label(false)
    ->dropDownList(
        $model->departments,
        [
            'prompt' => '---- Select Dept ----',
            'onchange' => 'this.form.submit()',
        ]
    ); ?>

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

我想要实现的目标： 当用户更改下拉列值（即为行选择新部门）时，页面应立即保存新值而不刷新表单。

不幸的是我不知道接下来该做什么。表单显示正常，但我不知道如何提交ajax。

谢谢！

Answer 1

以下是工作解决方案：

gridview中每行一个表单（下拉列表）
如果用户更改下拉列表值，则会立即通过ajax更新数据库，而不会重新加载页面

表格：（_ departmentForm.php）

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;

?>
<?php $form = ActiveForm::begin(
    [
        'action' => [
            'survey/department', 
            'question_id' => $model->question_id,
        ],
    ]
); ?>

<?= $form
    ->field($model, 'fk_departmentID')
    ->label(false)
    ->dropDownList(
        $model->departments,
        [
            'prompt' => '-- none --',
            'class' => 'form-control ajax-department',
            //'onchange' => 'this.form.submit()', - used for debugging
        ]
    ); ?>

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

<强> GridView的：

<?= GridView::widget([
    'dataProvider' => $questionData,
    'filterModel' => $questionSearch,
    'pager' => [
        'firstPageLabel' => 'First',
        'lastPageLabel' => 'Last',
    ],
    'columns' => [
        //... other fields here
        [
            'content' => function($model) {
                return $this->render('_departmentForm',
                    [
                        'model' => $model,
                    ]);
            },
        ],

    ],
]); ?>

<强> JQuery的：

$('.ajax-department').on('change', function () {
    var form = $(this).parent().parent(); // form of the dropdown
    $.ajax({
        url: form.attr('action'),
        type: 'post',
        data: form.serialize(),
        success: function (response) {
            //alert($(response).attr('msg'));
        },
        error: function () {
            alert('Error: There was an error whilst processing this request.');
        }
    });
    return false; 
});

控制器操作：

use yii\web\Response;

public function actionDepartment($question_id)
{
    $model = $this->findModel(['question_id' => $question_id]);
    $post = Yii::$app->request->post();
    Yii::$app->response->format = Response::FORMAT_JSON;

    if ($model->load($post) && $model->save()) {
        return ['msg' => 'Successfully updated'];
    } else {
        return ['msg' => 'Update failed'];
    }
}

它就是 - 你现在在GridView的每一行中都有一个ajax下拉列表。

一些提示：在调试操作（服务器端活动）时，注释掉jquery函数并取消注释＆＃34; onchange＆＃34;表格中的参数。这会导致表单在更改时提交，并允许您调试操作。一旦您的行动有效，您就可以注释掉＆＃34; onchange＆＃34;行动。

调试客户端（jQuery）时，请使用console.log（...）或alert（...）

Yii2 activeform ajax

1 个答案: