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

Question

With reference to How to implement Yii2 Modal Dialog on Gridview view and update button?, the problem is currently solved on enabling Yii2 gridview view button with modal dialog. However, i implemented a "create new" button above the gridview which opens up a modal too.

Now when i click on the view button on gridview which opens up a modal, i close the modal and click on "create new" button. But the content in "create new" button modal opens up showing the same content as the one inside "view"'s modal. Similar problem encountered as in Twitter bootstrap remote modal shows same content everytime .

The solution seems to be adding

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

but i am not sure how to add it inside the js.

Below are my codes:

<?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(); ?>

Hope anyone can give me advice. Thanks!

Answer 1

This happens because of this line:

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

That means the html will be inserted into each modal body.

In case of multiple modals in one page you should specify exact modal which you want to change.

Change this line to:

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

Additionally you can clear modal's content using events:

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

Check the events section in official Boostrap 3 documentation to modals.