Fatal编程技术网
  • javascript/
  • Javascript hide.bs.modal在引导程序3.2 w/Django 1.6.5（远程模式内容）中未触发

Javascript hide.bs.modal在引导程序3.2 w/Django 1.6.5（远程模式内容）中未触发

javascript jquery django twitter-bootstrap-3

Javascript hide.bs.modal在引导程序3.2 w/Django 1.6.5（远程模式内容）中未触发,javascript,jquery,django,twitter-bootstrap-3,modal-dialog,Javascript,Jquery,Django,Twitter Bootstrap 3,Modal Dialog,我正在使用一个显示主机列表的仪表板。当用户单击主机时，我想弹出一个模式对话框，其中包含有关该主机的其他详细信息。我目前正在使用Bootstrap的远程模式功能来触发Django视图并填充模式。对于生成的第一个模态，此功能工作正常。之后，无论单击哪个链接，每次都会显示相同的模式 我在SO和其他地方找到了关于这个问题的帖子，这就是建议的解决方案（使用jQuery）： 我已经尝试过这样做，但是上面的代码从未触发过。我尝试添加一个console.log（'hidden！'）只是为了确认，但该日志从未显示

我正在使用一个显示主机列表的仪表板。当用户单击主机时，我想弹出一个模式对话框，其中包含有关该主机的其他详细信息。我目前正在使用Bootstrap的远程模式功能来触发Django视图并填充模式。对于生成的第一个模态，此功能工作正常。之后，无论单击哪个链接，每次都会显示相同的模式

我在SO和其他地方找到了关于这个问题的帖子，这就是建议的解决方案（使用jQuery）：

我已经尝试过这样做，但是上面的代码从未触发过。我尝试添加一个console.log（'hidden！'）只是为了确认，但该日志从未显示任何内容。控制台中也没有显示任何错误。是否有一些我忽略的简单事情阻止了这段代码的工作？这开始让我发疯了

以下是我的html，我将其称为模态：

<a href="/portal/hostdetail/{{host.hostname}}" data-toggle="modal" host-name="{{host.hostname}}" data-target="#hostDetail">{{host.hostname}}</a>
这是模态本身（本地模态，而不是远程模态）：
另外，我一直在读到“远程”模式功能在引导中被弃用，我应该使用jQuery的.load函数。如果是这种情况，并且没有办法修复我当前的代码，有人可以将我链接到一个好的资源，以准确地展示如何通过jQuery完成这一切吗？在jQuery和Javascript方面，我是一个非常不在行的人，所以一些非常基本的东西会非常棒

提前谢谢

我最后用jQuery.load（）重做了所有的事情。下面是所有相关的html/javascript。我确信代码没有它可能的那么干净，因为我是一个noob，但它可以工作

基本页面HTML：

<td><a href="/portal/hostdetail/{{host.hostname}}" current_host="{{host.hostname}}" data-target="#hostDetail">{{host.hostname|upper}}</a></td>

<div class="modal " id="hostDetail" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true">  
    <div class="modal-dialog">  
        <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              </div>
              <div class="modal-body">

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>

        </div>  
    </div>  
</div>
远程页面（模式）html：


引导模式的远程文件
标题文本在这里
正文在这里
页脚的东西在这里
我建议使用类似的东西，而不是使用jQuery和服务器端模板。我很欣赏这个建议，但即使使用Knockout，我仍然需要使用“.on（'hide.bs.modal'）”，这在我的实例中似乎根本不起作用。知道为什么吗？我试着将检测模式隐藏的jQuery脚本粘贴到远程页面中，它启动得很好。。。唯一的问题是，“静态”页面上的缓存没有被清除。如果我运行$（'#hostDetail'）.removeData（'bs.modal'）；在Javascript控制台中，这具有所需的效果。我的主要问题是我需要检测“远程”模式何时关闭，以便在适当的时间启动removeData功能。 
<div class="modal fade" id="hostDetail" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true">  
    <div class="modal-dialog">  
        <div class="modal-content"></div>  
    </div>  
</div>  

<td><a href="/portal/hostdetail/{{host.hostname}}" current_host="{{host.hostname}}" data-target="#hostDetail">{{host.hostname|upper}}</a></td>

<div class="modal " id="hostDetail" tabindex="-1" role="dialog" aria-labelledby="remoteModalLabel" aria-hidden="true">  
    <div class="modal-dialog">  
        <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              </div>
              <div class="modal-body">

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>

        </div>  
    </div>  
</div>      

$('a[data-target="#hostDetail"]').click(function(event) {   
    event.preventDefault();
    $("#hostDetail").modal('hide');
    var current_host = $(this).attr("current_host");
    var myModal = $('#hostDetail');
    var modalBody = myModal.find('.modal-content');
    // load content into modal
    var remote = '/portal/hostdetail/' + current_host;
    modalBody.load(remote, null, function (data) {
        // display modal
        myModal.modal('show');  
        });

});

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Remote file for Bootstrap Modal</title>  
</head>
<body>

    <div class="modal-header">
        Header text goes here
    </div>

    <div class="modal-body">
        Body text goes here
    </div>

    <div class="modal-footer">
        Footer stuff goes here
    </div>

</body>
</html>