Gridview 视图和更新按钮上的 Yii2 模式对话框显示两个按钮的相同内容

Question

参考，目前解决了启用Yii2 gridview view button with modal dialog的问题。但是，我在 gridview 上方实现了一个 "create new" 按钮，它也打开了一个模式。

现在，当我单击打开模式的 gridview 上的视图按钮时，我关闭模式并单击 "create new" 按钮。但是 "create new" 按钮模态中的内容打开后显示的内容与 "view" 模态中的内容相同。遇到与 Twitter bootstrap remote modal shows same content everytime .

类似的问题

解决方案似乎是添加

$('#myModal').on('hidden', function () {
  $(this).removeData('modal');
});

但我不确定如何在 js 中添加它。

下面是我的代码：

<?php 

$gridColumns = [
    [   
        'format' => 'html',
        'attribute' => 'avatar',
        'label'=>'Image',
        'headerOptions' => ['width' => '80%',],     
    ],

    [   'class' => 'yii\grid\ActionColumn', 
        'template' => '{view} {delete}',
        'headerOptions' => ['width' => '20%', 'class' => 'activity-view-link',],        
            'contentOptions' => ['class' => 'padding-left-5px'],

        'buttons' => [
            'view' => function ($url, $model, $key) {
                return Html::a('<span class="glyphicon glyphicon-eye-open"></span>','#', [
                    'id' => 'activity-view-link',
                    'title' => Yii::t('yii', 'View'),
                    'data-toggle' => 'modal',
                    'data-target' => '#activity-modal',
                    'data-id' => $key,
                    'data-pjax' => '0',

                ]);
            },
        ],


    ],

];
?>


<?php

Modal::begin([
    'header' => '<h4 class="modal-title">Create New</b></h4>',
    'toggleButton' => ['label' => 'Create New'],
    'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',
]);

echo 'Say hello...';

Modal::end();
?>
<br />


Pjax::begin();

echo \kartik\grid\GridView::widget([
    'dataProvider' => $dataProvider,
    'columns'=>$gridColumns,
    'summary'=>false,
    'responsive'=>true,
    'hover'=>true
]);
Pjax::end();

?>      


<?php $this->registerJs(
    "$('.activity-view-link').click(function() {
    $.get(
        'imgview',         
        {
            id: $(this).closest('tr').data('key')
        },
        function (data) {
            $('.modal-body').html(data);
            $('#activity-modal').modal();
        }  
    );
});
    "
); ?>

<?php


?>

<?php Modal::begin([
    'id' => 'activity-modal',
    'header' => '<h4 class="modal-title">View Image</h4>',
    'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',

]); ?>

<div class="well">


</div>


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

希望有人能给我建议。谢谢！

Answer 1

这是因为这一行：

$('.modal-body').html(data);

这意味着 html 将被插入到每个模态主体中。

如果一页中有多个模态框，您应该指定要更改的确切模态框。

将此行更改为：

$('#activity-modal').find('.modal-body').html(data);

此外，您可以使用事件清除模态内容：

$('#activity-modal').on('hidden.bs.modal', function (e) {
    $(this).find('.modal-body').html('');
})

检查 official Boostrap 3 documentation to modals 中的事件部分。

Gridview 视图和更新按钮上的 Yii2 模式对话框显示两个按钮的相同内容

Yii2 Modal Dialog on Gridview view and update button shows same content for both buttons

modal-dialog

yii2