bootstrap模态框（modal)使用remote方法加载数据，只能加载一次的解决办法

bootstrap的modal中(关于modal的介绍见:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html)，有一个remote选项，可以动态加载页面到modal-body中

有两种方法，一种是使用链接，另一种就是使用脚本。

1 使用链接

<a href="user/userDetail.jsp" data-toggle="modal" data-target="#myModal">打开对话框</a>

当点击该连接时，userDetail.jsp的内容就可以动态的加载到div.modal-body中。当然这里的连接也可以是action

2 使用脚本

[javascript]  view plain copy print ?

1. $("#myModal").modal({  
2.     remote: "page.jsp"  
3. });  

但是这样加载后，会有问题，modal数据只加载一次，如果要加载不同的数据，例如根据id查询不同物品的详细信息，modal的数据是不能更新的，即使传的id值不同。其实解决办法很简单，只需要在加载下次数据前，将之前的加载的数据清除即可。

清除之前加载的数据，让对话框能够在每次打开时重新加载页面

最简单的方式就是监听modal的hidden，当modal关闭时，即把数据清除即可：

 
 

  
  

   
   

    
    [javascript] 
    
    view plain
    
    copy
    
    print
    
    ?
    
    

   
   
  
  
  
  
$("#myModal").on("hidden", function() {  
    $(this).removeData("modal");  
});  
 
 

也可以在每次打开对话框之前移除数据，效果是一样的。

注：上面的代码基于 Bootstrap v2，如果使用 Bootstrape v3，模态对话框的 HTML 和事件的写法有一些不同，例如对于上面的 hidden 事件，要写成：

[javascript]  view plain copy print ?

1. $("#myModal").on("hidden.bs.modal", function() {  
2.     $(this).removeData("bs.modal");  
3. });