hide.bs.modal not firing in Bootstrap 3.2 w/ Django 1.6.5 (remote modal content)

Question

I'm working on a dashboard that shows a list of hosts. When the user clicks on a host, I would like to pop up a modal dialog with additional details about that host. I'm currently using Bootstrap's remote modal functionality to trigger a Django view and populate the modal. This functionality is working just fine for the first modal that is generated. After that, the same modal is just shown every single time, regardless of the link that is clicked on.

I have found posts about this issue at SO and other places, and this is the proposed solution (using jQuery):

$('#hostDetail').on('hide.bs.modal', function(e) {
    $(this).removeData('bs.modal');
});

I've tried doing this, but the above code never fires. I tried adding a console.log('hidden!') just to confirm, but the log never shows anything. No errors are showing in the console either. Is there some simple thing I've overlooking that is preventing this code from working? It's beginning to drive me crazy!

here is my html where I call the modal:

<a href="/portal/hostdetail/{{host.hostname}}" data-toggle="modal" host-name="{{host.hostname}}" data-target="#hostDetail">{{host.hostname}}</a>

and here is the modal itself (the local modal, not the remote one):

<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>

Also, I have been reading that the 'remote' modal functionality is being deprecated from Bootstrap, and that I should use jQuery's .load function. If this is the case, and there's no way to fix my current code, can someone link me to a good resource to show exactly how to do it all through jQuery? I'm very much a noob when it comes to jQuery and Javascript, so something very basic would be awesome!

Thanks in advance.

I would recommend something like [Knockout.js](http://knockoutjs.com/) instead of using jQuery & server-side templates. — cvrebert, Oct 29 '14 at 23:23
I appreciate the suggestion, but even using Knockout [it seems like](http://stackoverflow.com/questions/22706765/twitter-bootstrap-3-modal-with-knockout) I would still need to use ".on('hide.bs.modal')", which doesn't seem to be working at all in my instance. Any idea why? — Paul Greene, Oct 30 '14 at 14:24
I tried pasting the jQuery script that detects the modal hide into the remote page, and it fires just fine... the only problem is, the cache on the "static" page is not cleared. If I run $('#hostDetail').removeData('bs.modal'); in the Javascript console, this has the desired effect. My main issue is I need to detect when the "remote" modal closes so I can fire the removeData function at the appropriate time. — Paul Greene, Oct 30 '14 at 21:09

score 0 · Accepted Answer · answered Nov 03 '14 at 20:01

I ended up redoing everything using jQuery.load() . Here is all of the relevant html / javascript. I'm sure the code isn't as clean as it could be because I'm a noob, but it works.

base page 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>

base page javascript:

$('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');  
        });

});

remote page (modal) html:

<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>

hide.bs.modal not firing in Bootstrap 3.2 w/ Django 1.6.5 (remote modal content)

1 Answers1