Question

参考How to implement Yii2 Modal Dialog on Gridview view and update button?，目前解决了使用模态对话框启用Yii2 gridview视图按钮的问题。但是，我在gridview上方实现了一个“创建新”按钮，它也打开了一个模态。

现在，当我点击gridview上的视图按钮打开一个模态时，我关闭模态并单击“创建新”按钮。但是“创建新”按钮模式中的内容打开显示与“视图”模式中的内容相同的内容。与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模态对话框显示两个按钮的相同内容

1 个答案: