bootstrap 链接打开模态框数据无法刷新的解决方案
2017-07-24 18:19
453 查看
bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法
bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示
如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容(只加载一次)并插入 .modal-content 内。如果使用的是 data 属性 API,还可以利用 href 属性指定内容来源地址。下面是两个实例:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
$("#myModal").modal({
remote: "/info?id="+id,
backdrop: 'static',
keyboard: false
});
但是这样加载后,会有问题,modal数据只加载一次,如果要加载不同的数据,例如根据id查询不同物品的详细信息,modal的数据是不能更新的,即使传的id值不同。其实解决办法很简单,只需要在加载下次数据前,将之前的加载的数据清除即可。
解决方法:监听modal的hidden,当modal关闭时,即把数据清除即可。
代码如下
$("#myModal").on("hidden", function() {
$(this).removeData("modal");
});
上面的代码基于 Bootstrap v2,如果使用的是 Bootstrape v3
$("#myModal").on("hidden.bs.modal", function() {
$(this).removeData("bs.modal");
});
或者
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
或者
$(document).on("hidden.bs.modal", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
或者
$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
如果觉得这文章还算用心,请劳驾点击右下角的推荐,这是对我们这些做开源分享的最大的肯定,谢谢。
bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法
bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示
如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容(只加载一次)并插入 .modal-content 内。如果使用的是 data 属性 API,还可以利用 href 属性指定内容来源地址。下面是两个实例:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
$("#myModal").modal({
remote: "/info?id="+id,
backdrop: 'static',
keyboard: false
});
但是这样加载后,会有问题,modal数据只加载一次,如果要加载不同的数据,例如根据id查询不同物品的详细信息,modal的数据是不能更新的,即使传的id值不同。其实解决办法很简单,只需要在加载下次数据前,将之前的加载的数据清除即可。
解决方法:监听modal的hidden,当modal关闭时,即把数据清除即可。
代码如下
$("#myModal").on("hidden", function() {
$(this).removeData("modal");
});
上面的代码基于 Bootstrap v2,如果使用的是 Bootstrape v3
$("#myModal").on("hidden.bs.modal", function() {
$(this).removeData("bs.modal");
});
或者
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
或者
$(document).on("hidden.bs.modal", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
或者
$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
如果觉得这文章还算用心,请劳驾点击右下角的推荐,这是对我们这些做开源分享的最大的肯定,谢谢。
相关文章推荐
- 关于showmodaldialog 打开新窗口后提交表单操作时,避免弹出新窗口和避免从后台获取“新数据”后不能刷新当前模态页面的解决方案
- 使用showModalDialog打开模态窗口添加数据后刷新原窗口 .
- MSN异常:Windows LIVE MAIL无法打开 日历中包含受损数据 解决方案
- Bootstrap3 多个模态对话框无法显示的解决方案
- MSN异常:Windows LIVE MAIL无法打开 日历中包含受损数据 解决方案
- 使用showModalDialog打开模态窗口添加数据后刷新原窗口
- [转]使用showModalDialog打开模态窗口添加数据后刷新原窗口
- bcp备份数据表报“无法打开宿主数据文件”的解决方案
- Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框
- 使用showModalDialog打开模态窗口添加数据后刷新原窗口
- vs2008/2010安装无法打开数据文件解决方案
- Struts2的Action中getXXX()方法刷新后无法保存数据的解决方案
- win7 0xc000000e bcdedit 无法打开启动配置数据存储 系统找不到指定的文件
- IE无法正常打开QC的解决方案
- 单击链接后无法打开新的 Internet Explorer 窗口或没有任何反应
- silverlight无法调试"unable to start program 数据无效" 解决方案
- 单击链接后无法打开新的 Internet Explorer 窗口或没有任何反应
- IE无法打开链接的处理方法
- angular http post后端无法获取数据的解决方案
- IIS5中文链接无法打开解决方法(转)