I want to change default buttons on ActionColumn (GridView::widget) using modal popup window. here is my code:

            ['class' => 'yii\grid\ActionColumn',
            'contentOptions' => ['style' => 'width: 8.7%'],
            'visible'=> Yii::$app->user->isGuest ? false : true,
            'buttons'=>[
                'view'=>function ($url, $model) {
                    $t = 'index.php?r=site/view&id='.$model->id;
                    return Html::button('<span class="glyphicon glyphicon-eye-open"></span>', ['value'=>Url::to($t), 'class' => 'btn btn-default btn-xs', 'id'=>'modalButtonView']);
                },
                'update'=>function ($url, $model) {
                    $t = 'index.php?r=site/update&id='.$model->id;
                    return Html::button('<span class="glyphicon glyphicon-pencil"></span>', ['value'=>Url::to($t), 'class' => 'btn btn-default btn-xs', 'id'=>'modalButtonView']);
                },
            ],
        ],

Only first button works well, another buttons doesn't. What should I change? And can I use anchor tags instead buttons? Here are my js and ModalWidget:

$(function(){
$('#modalButtonView').click(function(){
    $('#modalView').modal('show').find('#modalContentView').load($(this).attr('value'));

});});


        Modal::begin(['id'=>'modalView', 'size'=>'modal-md']);
    echo "<div id='modalContentView'></div>";
    Modal::end();

I want to change default buttons on ActionColumn (GridView::widget) using modal popup window. here is my code:

            ['class' => 'yii\grid\ActionColumn',
            'contentOptions' => ['style' => 'width: 8.7%'],
            'visible'=> Yii::$app->user->isGuest ? false : true,
            'buttons'=>[
                'view'=>function ($url, $model) {
                    $t = 'index.php?r=site/view&id='.$model->id;
                    return Html::button('<span class="glyphicon glyphicon-eye-open"></span>', ['value'=>Url::to($t), 'class' => 'btn btn-default btn-xs', 'id'=>'modalButtonView']);
                },
                'update'=>function ($url, $model) {
                    $t = 'index.php?r=site/update&id='.$model->id;
                    return Html::button('<span class="glyphicon glyphicon-pencil"></span>', ['value'=>Url::to($t), 'class' => 'btn btn-default btn-xs', 'id'=>'modalButtonView']);
                },
            ],
        ],

Only first button works well, another buttons doesn't. What should I change? And can I use anchor tags instead buttons? Here are my js and ModalWidget:

$(function(){
$('#modalButtonView').click(function(){
    $('#modalView').modal('show').find('#modalContentView').load($(this).attr('value'));

});});


        Modal::begin(['id'=>'modalView', 'size'=>'modal-md']);
    echo "<div id='modalContentView'></div>";
    Modal::end();

• javascript
• yii2

4 Answers 4

The basic rules in html.

ID must unique.

use this code

    ['class' => 'yii\grid\ActionColumn',
    'contentOptions' => ['style' => 'width: 8.7%'],
    'visible'=> Yii::$app->user->isGuest ? false : true,
    'buttons'=>[
        'view'=>function ($url, $model) {
            $t = 'index.php?r=site/view&id='.$model->id;
            return Html::button('<span class="glyphicon glyphicon-eye-open"></span>', ['value'=>Url::to($t), 'class' => 'btn btn-default btn-xs custom_button']);
        },
        'update'=>function ($url, $model) {
            $t = 'index.php?r=site/update&id='.$model->id;
            return Html::button('<span class="glyphicon glyphicon-pencil"></span>', ['value'=>Url::to($t), 'class' => 'btn btn-default btn-xs custom_button']);
        },
    ],
],

then yor jquery

$(function(){
$('.custom_button').click(function(){
    $('#modalView').modal('show').find('#modalContentView').load($(this).attr('value'));

});});

    Modal::begin(['id'=>'modalView', 'size'=>'modal-md']);
echo "<div id='modalContentView'></div>";
Modal::end();

You are using id in your buttons html options... Id is unique for Html elements.

Instead of id you have to use class of modelButtonView and change your JS according to it..

If you don't want to use Html::button (with jquery). You can use Html::a:

['class' => 'yii\grid\ActionColumn',
            'contentOptions' => ['style' => 'width: 7%'],
            'visible'=> Yii::$app->user->isGuest ? false : true,
            'buttons'=>[
                'view'=>function ($url) {
                    return Html::a('', $url, ['class' => 'glyphicon glyphicon-eye-open btn btn-default btn-xs custom_button']);
                },
                'update'=>function ($url) {
                    return Html::a('', $url, ['class' => 'glyphicon glyphicon-pencil btn btn-default btn-xs custom_button']);
                },
            ],
        ],

this example is easy to understand me have one doubt

`['class' => 'yii\grid\ActionColumn',
                        'contentOptions' => ['style' => 'width: 8.7%'],
                        'visible'=> false,
                        'buttons'=>[
                                'view'=>function ($url, $model) {
                                    $t = 'index.php?r=site/view&id='.$model->id;
                                    return Html::button('', ['value'=>Url::to($t), 'class' => 'btn btn-default btn-xs custom_button']);
                                },
                                'update'=>function ($url, $model) {
                                    $t = 'index.php?r=site/update&id='.$model->id;
                                    return Html::button('', ['value'=>Url::to($t), 'class' => 'btn btn-default btn-xs custom_button']);
                                },
                                ],
                                ],`