![模态]( "模态")
本文介绍了Gridview 视图和更新按钮上的 Yii2 模态对话框显示两个按钮的相同内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
参考如何在 Gridview 视图和更新按钮上实现 Yii2 模态对话框?，问题目前在启用带有模态对话框的 Yii2 gridview 视图按钮上解决.但是，我在 gridview 上方实现了一个创建新"按钮，它也打开了一个模态.
现在，当我单击打开模态的 gridview 上的视图按钮时，我关闭模态并单击创建新"按钮.但是创建新"按钮模式中的内容打开时显示的内容与视图"模式中的内容相同.遇到与 Twitter 引导远程模式每次都显示相同内容 .
解决方案似乎是添加
$('#myModal').on('hidden', function () {$(this).removeData('modal');});
但我不知道如何将它添加到 js 中.
以下是我的代码:
'html','属性' =>'头像','标签'='图像','headerOptions' =>['宽度' =>'80%',],],['类' =>'yiigridActionColumn','模板' =>'{查看} {删除}','headerOptions' =>['宽度' =>'20%', 'class' =>'活动视图链接',],'内容选项' =>['类' =>'padding-left-5px'],'按钮' =>['视图' =>函数($url，$model，$key){return Html::a('<span class="glyphicon glyphicon-eye-open"></span>','#', ['id' =>'活动视图-链接','标题' =>Yii::t('yii', '查看'),'数据切换' =>'模态','数据目标' =>'#activity-modal','数据 ID' =>$key,'数据-pjax' =>'0',]);},],],];?><?php模态::开始(['标题' =>'<h4 class="modal-title">新建</b></h4>','切换按钮' =>['标签' =>'创建新的']，'页脚' =>'<a href="#" class="btn btn-primary" data-dismiss="modal">关闭</a>',]);echo '问好...';模态::结束();?><br/>Pjax::begin();回声 kartikgridGridView::widget(['数据提供者' =>$数据提供者，'列'=>$gridColumns，'摘要'=>假，'响应'=> 真，'悬停'=>真]);Pjax::end();?><?php $this->registerJs("$('.activity-view-link').click(function() {$.get('图像视图',{id: $(this).closest('tr').data('key')},功能(数据){$('.modal-body').html(data);$('#activity-modal').modal();});});");?><?php?><?php Modal::begin(['id' =>'活动模式'，'标题' =>'<h4 class="modal-title">查看图片</h4>','页脚' =>'<a href="#" class="btn btn-primary" data-dismiss="modal">关闭</a>',]);?><div class="well">
<?php Modal::end();?>
希望大家能给我建议.谢谢！
解决方案
出现这种情况是因为这一行:
$('.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('');})
查看官方 Boostrap 3 模态文档中的事件部分.
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' => 'yiigridActionColumn',
'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 kartikgridGridView::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!
解决方案
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.
这篇关于Gridview 视图和更新按钮上的 Yii2 模态对话框显示两个按钮的相同内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！