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!

sorry i did not add modal to update button currently. "Create new" and view (from gridview) modals were already in conflict. — esiaz, Feb 12 '15 at 06:23
how do i clear the content in modal after closing so that the same content will not display when i click on another button launching a modal? — esiaz, Feb 12 '15 at 06:25

arogachev · Accepted Answer · 2016-03-15T06:20:01.440

3

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.

edited Mar 15 '16 at 06:20

answered Feb 12 '15 at 06:37

arogachev

33,150
7
114
117

if i were to add a modal to update button in gridview as well, how do i go about doing it? – esiaz Feb 12 '15 at 06:49
since 'headerOptions' => ['width' => '120px', 'class' => 'activity-link',], triggers one uniform action $('.activity-link').click(function() , how do i add a modal for update button? – esiaz Feb 12 '15 at 07:40
According to initial question formulation current problem is solved. So I think you should create separate question and describe another problem in details. – arogachev Feb 12 '15 at 08:04
arogachev could u help me with this please? http://stackoverflow.com/questions/28575358/yii2-ckeditor-loading-in-modal-conflicts-when-there-is-more-than-once-instance-o – esiaz Feb 25 '15 at 09:16
I'm having a very similar problem to this where I have an "Add" button on top of my gridview and an "Edit" button on my gridview. Both show up correctly, but the Edit Modal "save" button doesn't respond OnClick. See https://stackoverflow.com/questions/48241070/the-second-modal-in-my-aspx-file-doesnt-post-when-clicking-submit-button – jroyce Jan 14 '18 at 11:54

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

1 Answers1

Linked