Yii2 GridView中Bootstrap模态框重复点击href内容不更新问题解决

问题根源 #

Bootstrap模态框默认会缓存远程加载的内容，第一次请求后，后续触发时不会重新发起新请求，直接复用首次加载的内容，这就是你遇到后续点击始终加载首次内容的原因。

具体解决方案 #

方案1：关闭模态框时清空内容并清除缓存 #

给模态框绑定关闭事件，每次关闭时清空内容并移除缓存关联，确保下次打开时重新加载新内容：

// 替换成你的模态框实际ID
$('#modal').on('hidden.bs.modal', function () {
    $(this).removeData('bs.modal'); // 清除模态框的缓存数据
    $(this).find('.modal-content').empty(); // 清空模态框内的内容
});

// 绑定所有触发按钮的点击事件
$('.modal-btn').on('click', function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr('href');
    // 打开模态框并加载对应URL的内容
    $('#modal').modal('show').find('.modal-content').load(targetUrl);
});

需要在GridView的按钮配置里给所有触发模态框的按钮加上统一类名modal-btn，示例：

[
    'class' => 'yii\grid\ActionColumn',
    'buttons' => [
        'view' => function ($url) {
            return Html::a('查看', $url, [
                'class' => 'modal-btn',
                'title' => '查看详情'
            ]);
        },
        'edit' => function ($url) {
            return Html::a('编辑', $url, [
                'class' => 'modal-btn',
                'title' => '编辑内容'
            ]);
        }
    ]
]

方案2：直接禁用模态框的缓存机制 #

如果你使用的是Bootstrap 3，可以在初始化模态框时禁用缓存，不过这种方式兼容性不如方案1稳定：

$('#modal').modal({
    cache: false
});

配合按钮的点击事件，确保每次都加载最新的URL内容。

排查误区提醒 #

不要直接移除项目中的JS库，Yii2核心依赖jQuery和Bootstrap JS，删除后必然导致页面功能异常。排查问题时应该通过注释部分自定义JS代码来定位问题，而不是删除依赖库。

内容的提问来源于stack exchange，提问作者Safira