Clear Modal With External Content Bootstrap 3

Полное заявление об отказе от ответственности - я немного ужасен в jQuery, и я просто возился с бутстрапом и хотел бы немного помочь.Clear Modal With External Content Bootstrap 3

Я создаю страницу с несколькими модальными ссылками - эти ссылки будут загружать внешний контент в модальный. Я хочу использовать один и тот же модальный и просто перезагружать контент. Но контент не освежает - независимо от второй ссылки, которую я нажимаю, чтобы заполнить модальную, присутствует контент с первого щелчка.

После некоторого исследования SO я нашел различные ответы с теми же (или подобными) фрагментами кода, которые кажутся очень простыми и работают для многих других пользователей. Но я просто не могу заставить мое работать. Я чувствую, что делаю очень глупую ошибку из-за отсутствия опыта jQuery.

Из того, что я смог вывести - по какой-то причине мероприятие не стреляет вообще. Даже когда я заменяю функцию простым предупреждением, она все равно не срабатывает.

Может ли кто-нибудь быстро взглянуть и указать мне в правильном направлении?

Заранее благодарен.

<script> 
    $(document.body).on('hidden.bs.modal', function() { 
     $('#myModal').removeData('bs.modal') 
    }); 
</script> 


<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Modal Title</h4> 

      </div> 
      <div class="modal-body"><div class="te"><img class="img-responsive" style="margin:0 auto;" src="/img/loading.gif"></div></div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal -->

EDIT: Созданная отдельная тестовая страница, показанная ниже, чтобы помочь кому-то определить мою, вероятно, очень глупую ошибку.

<head> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
</head> 
<body> 

<script> 
$('#myModal').on('hidden.bs.modal', function() { 
    alert('triggered') 
}); 
</script> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Modal Title</h4> 

      </div> 
      <div class="modal-body"><div class="te"><img class="img-responsive" style="margin:0 auto;" src="/img/loading.gif"></div></div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

</body>

источник

2015-04-26 loveforfire33

Вам необходимо назначить событие #myModal

$('#myModal').on('hidden.bs.modal', function() { 
    //do your thing here 
});

Проверьте документацию: http://getbootstrap.com/javascript/#modals

Special jsfiddle для вас мой друг: http://jsfiddle.net/ys969vn5/

источник

2015-04-26 07:41:01

Спасибо за ответ. Я действительно прочитал этот документ, пытаясь понять это, но предположил, что я делаю все, что он сказал. Я заменил свой jQuery следующим и пока не отображается предупреждение. – loveforfire33

Как вы можете видеть, это работает на скрипке. Может быть, вы что-то пропустили @ loveforfire33 –

Yup, он уверен :(- Мне явно чего-то не хватает. – loveforfire33

Это очистит html в модульном заголовке, нижнем колонтитуле.

$('#myModal').on('hidden.bs.modal', function() { 
    $('#myModal .modal-header, #myModal .modal-body, #myModal .modal-footer').html(''); 
});

источник

2015-04-26 07:36:02 Tushar

Спасибо за ответ. Я заменил свой jQuery следующим и пока не отображается предупреждение. – loveforfire33

Вы обернули его в 'ready' – Tushar

Как я скопировал это именно то, как я его использовал. Еще раз спасибо – loveforfire33

Clear Modal With External Content Bootstrap 3

ответ

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