Yii2 модальное окно

Базовый пример - обновление через модальное окно

Создаем заглушку под модальное окно в общей зоне видимости. Можно в \views\user\index.php, можно в \views\layouts\main.php

----------------
<!-- Modal "" -->
<div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                ...
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
----------------

\views\user\index.php

регистрируем js файл

----------------
<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;

$this->registerJsFile(
        'scripts/index.js', ['depends' => 'app\assets\AppAsset']
);
----------------

изменить поведение кнопки обновить
----------------
    <?=
    GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'id',
            'name',
            'money',
            [
                'class' => 'yii\grid\ActionColumn',
                'buttons' => [
                    'update' => function ($url, $model) use ($controller) {
                        return Html::a("<span class='glyphicon glyphicon-pencil' onclick='myedit(" . $model->id . " , \"modalupdate\"); return false;'></span>", $url, [
                                    'title' => Yii::t('app', 'view'),
                        ]);
                    },
                        ],
                        'template' => '{view} {update} {delete}',
                    ]
                ],
            ]);
            ?>
----------------

js файл \web\scripts\index.js
----------------
function myedit(id,  act)
{
    var modalContainer = $('#my-modal');
    modalContainer.modal({show: true});
    $.ajax({
        url: act,
        type: "POST",
        data: {'id': id, 'act': 'modal'},
        success: function (data) {
            $('.modal-body').html(data);
            modalContainer.modal({show: true});

            $("#user-form").on("submit", function (event) {
                event.preventDefault();                
                var data = $(this).serialize();
                data.id = id;
                $.ajax({
                    url: act,
                    type: "POST",
                    data: data,
                    success: function (data) {
                        $('.modal-body').html(data);
                    }
                });
            });
        }
    });
}
----------------

привязка идет по ид формы
----------------
    <?php $form = ActiveForm::begin(['id'=>"user-form" ]); ?>
    <?= $form->field($model, 'id')->hiddenInput(['value'=> $value])->label(false); ?> 
---------------- 

контроллер \controllers\UserController.php
----------------
    public function actionModalupdate($id = null) {
        if (empty($id))
            $id = Yii::$app->request->post('id');
        if (empty($id))
            $id = Yii::$app->request->post('User')['id'];

        $model = $this->findModel($id);
        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect('index');
        }
        return $this->renderPartial('update', [
                    'model' => $model,
        ]);
    }
----------------







исходники https://github.com/des1roer/yii2_shop




Комментарии

Популярные сообщения из этого блога

Пишем логи на C# (.NET). Легкий способ.

Учебник yii2