hide.bs.modal не работает в Bootstrap 3.2 w/Django 1.6.5 (удаленный модальный контент)

Я работаю над панелью, в которой отображается список хостов. Когда пользователь нажимает на хост, я хотел бы открыть модальный диалог с дополнительными сведениями об этом хосте. В настоящее время я использую удалённую модульную функциональность Bootstrap для запуска представления Django и заполнения модального. Эта функциональность работает отлично для первого модального, который генерируется. После этого один и тот же модально отображается только один раз, независимо от ссылки, на которую нажата кнопка.hide.bs.modal не работает в Bootstrap 3.2 w/Django 1.6.5 (удаленный модальный контент)

Я нашел сообщения об этой проблеме на SO и в других местах, и это предложенное решение (с использованием JQuery):

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

Я пытался сделать это, но приведенный выше код не срабатывает. Я попытался добавить console.log ('hidden!') Только для подтверждения, но журнал никогда ничего не показывает. В консоли также не отображаются ошибки. Есть ли какая-то простая вещь, которую я не замечаю, что мешает работе этого кода? Это начинает сводить меня с ума!

вот мой HTML, где я называю модальность:

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

и вот сама модальный (локальная модальный, а не удаленный один):

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

Кроме того, я был что «удаленная» модальная функциональность устарела из Bootstrap и что я должен использовать функцию .load jQuery. Если это так, и нет способа исправить мой текущий код, может ли кто-нибудь связать меня с хорошим ресурсом, чтобы показать, как это сделать через jQuery? Я очень люблю noob, когда дело доходит до jQuery и Javascript, поэтому что-то очень простое было бы потрясающе!

Заранее спасибо.

источник

2014-10-29 Paul Greene

Я бы рекомендовал что-то вроде [Knockout.js] (http://knockoutjs.com/) вместо использования шаблонов jQuery и server-side. – cvrebert

Я ценю предложение, но даже используя Knockout [похоже] (http://stackoverflow.com/questions/22706765/twitter-bootstrap-3-modal-with-knockout) Мне все равно нужно будет использовать «.on ('hide.bs.modal') ", который, похоже, не работает вообще в моем случае. Любая идея почему? –

Я попытался вставить скрипт jQuery, который обнаруживает модальное спряжение на удаленной странице, и он срабатывает просто отлично ... единственная проблема заключается в том, что кеш на «статической» странице не очищается. Если я запустил $ ('# hostDetail'). RemoveData ('bs.modal'); в консоли Javascript это имеет желаемый эффект. Моя основная проблема заключается в том, что мне нужно определить, когда «удаленный» модальный закрывается, поэтому я могу запустить функцию removeData в соответствующее время. –

В итоге я переработал все, используя jQuery.load(). Вот весь соответствующий html/javascript. Я уверен, что код не так чист, как может быть, потому что я ноб, но он работает.

база страница 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>

база страница 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'); 
     }); 

});

удаленной страницы (модальный) 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>

источник

2014-11-03 20:01:15

hide.bs.modal не работает в Bootstrap 3.2 w/Django 1.6.5 (удаленный модальный контент)

ответ

Смежные вопросы