Bootstrap modal and Ajax content

June 8, 2012
index.html

<script type="text/javascript">
    $(function() {
      $('[data-toggle="modal"]').click(function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        if (href.indexOf('#') == 0) {
          $(href).modal('open');
        } else {
        $.get(href, function(data) {
          $('<div class="modal">' + data + '</div>').modal();
        });
        }
      });
    });
</script>

<a href="/beta/detail/{{ result.host_id }}" data-toggle="modal">{{ result.host_name }}</a>
result.html

<div class="modal-header">
  <a class="close" data-dismiss="modal" >×</a>
  <h3>{{ result.host_name }}</h3>
</div>
<div class="modal-body">
  {{ result.host_name }}
</div>