GridView вызов модального окна из ActionColumn

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
novseo
Сообщения: 6
Зарегистрирован: 2019.04.03, 14:43

GridView вызов модального окна из ActionColumn

Сообщение novseo »

Доброго дня, Господа! У меня появился первый сидой волос. При нажатии на кастомную иконку в ActionColumn GridView выводится форма, которую я жду, но тут же страница перезагружается.
Ivan Kosh
Сообщения: 13
Зарегистрирован: 2019.04.02, 07:03

Re: GridView вызов модального окна из ActionColumn

Сообщение Ivan Kosh »

Без кода точно не сказать, но похоже на то что там нет pjax и кнопка это Html::submitButton
novseo
Сообщения: 6
Зарегистрирован: 2019.04.03, 14:43

Re: GridView вызов модального окна из ActionColumn

Сообщение novseo »

Если оборачиваю в Pjax, то с модальным окном все ОК, но вместо GridView рендериться форма) получается выскакивает модалка с формой поверх формы))) Колдовство, не менее!
Вьюха:

Код: Выделить всё

    <?php Pjax::begin(); ?>
 
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'tools_id',
            ['attribute'=>'tools_category', 'value'=>'toolscategoryName','filter'=>frontend\models\Toolscategory::getList()],
            'tools_name',
            'tools_serial',
            ['attribute'=>'tools_status', 'value'=>'toolsstatusName','filter'=>frontend\models\Toolsstatus::getList()],
            
            [
                'class' => '\yii\grid\ActionColumn',
                'template' => '{view} {update} {service}',
                'buttons' => [
                    'service' => function ($url, $model, $key) {
                        $options = [
                            'toolsid' => $key,
                            'class' => 'service',
                            'data-pjax' => '1',
                        ];
                        $icon = Html::tag('span', '', ['class' => "glyphicon glyphicon-wrench"]);
                        return Html::a($icon, $url, $options);
                    }
                ]
            ]
        ]
    ]); ?>
    
    <?php Pjax::end(); ?>
Контроллер:

Код: Выделить всё

   public function actionService($id)
    {
       $model = $this->findModel($id);

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['index']);
        }else{
            if(Yii::$app->request->isAjax){
                return $this->renderAjax('_formservice', [
                'model' => $model,
            ]);
            }else{
                return Yii::$app->response->redirect(Url::to(['tools/index']));
            }   
        }
    }
Форма и JS

Код: Выделить всё

<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                   <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Default Modal</h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>  
        </div>
    </div>
</div>
 
<?php $this->registerJs("
    $('.service').on('click', function(){
        var data = $(this).attr('toolsid');
        $('#modal-default').modal('show');
        $('#modal-default').find('.modal-title').text('Сдать в ремонт');
        $('#modal-default').find('.modal-body').load('/tools/service?id=' + data);
    });
");?>
Изображение
novseo
Сообщения: 6
Зарегистрирован: 2019.04.03, 14:43

Re: GridView вызов модального окна из ActionColumn

Сообщение novseo »

Кстати, с праздником, Господа! 4.04
Ivan Kosh
Сообщения: 13
Зарегистрирован: 2019.04.02, 07:03

Re: GridView вызов модального окна из ActionColumn

Сообщение Ivan Kosh »

Моя кнопка открытия модалки с qr-кодом

Код: Выделить всё

'buttons' => [
                            'qr' => function ($url, $data) {
                                return Html::a(
                                    '<span class="glyphicon glyphicon-qrcode"> </span>',
                                    $url,
                                    [
                                        'title' => 'QR-код',
                                        'data-pjax' => '1',
                                        'onclick' => "tryPrintQR('".$data->product_number."', '".$data->id."');return false;",
                                    ]
                                );
                            },
                        ],
тут в моем случае return false; глушит все последующие события подвязанные на тег <a>, такие как переход на другую страницу

как вариант, наверно можно добавить в Ваш js event.preventDefault(); сам event должен быть первым параметром колбека
novseo
Сообщения: 6
Зарегистрирован: 2019.04.03, 14:43

Re: GridView вызов модального окна из ActionColumn

Сообщение novseo »

Добавил в JS return false; и О счастье!!! Спасибо!
Ответить