×
文章路径: WEB前端 > JS

bootstrap模态窗口modal使用remote加载数据的缓存问题

发表于7年前(May 10, 2016 9:16:51 AM)  阅读 11571  评论 2

分类: WEB前端 JS

标签: bootstrap modal remote 缓存 removeData show.bs.modal hidden.bs.modal

模态窗口是很常用的控件,经常用来装载复杂的表单,bootstrap提供的modal模态弹窗提供了data-remote属性,用来指定远程加载的页面。但是该功能有个问题,如果该弹窗实例已经运行一次,则不会加载远程url的内容了,也就是说,如果您使用他加载一个动态表单,加载一次以后,除非刷新页面,再次弹窗依然是上次加载的内容。这个问题也许并不一定是bug,可能作者就是为了性能考虑,特意做的缓存,如果能配置是否缓存就更加完美了。

为了解决缓存问题,有几下几种方案:

1、移除绑定数据

在打开modal之前(show.bs.modal)或者关闭modal之后(hidden.bs.modal)移除之前绑定的数据,可以单独针对一个modal操作,也可以添加全局的监听方法,如:

$(document).on('hidden.bs.modal','.modal',function(e){
    $(this).removeData("bs.modal");
});
这样,所有的modal都会在关闭之后移除绑定,再次弹出后重新加载数据。我们还可以修改bootstrap源码,将移除绑定数据的方法添加到modal得hide方法里面去。

2、手动加载数据

远程加载的页面实际上是替换modal-content里面的内容,我们在弹出窗口前,先手动替换modal-content里面的内容,然后再让它弹出。同样,我们可以参考上面的实现,在show之前判断一下是否是配置了远程加载,如果配置了,则执行load目标页面的操作。显而易见,第一个方法最简单,这里就不列出手动加载的代码了。

发表评论