Перезавантажити вміст у модальному режимі (twitter bootstrap)

Я використовую модальне спливаюче вікно завантаження.

<div id="myModal" class="modal hide fade in">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Header</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <input type="submit" class="btn btn-success" value="Save"/>
    </div>
</div>

Я можу завантажити вміст за допомогою ajax за допомогою цього a-елемента:

<a data-toggle="modal" data-target="#myModal" href="edit.aspx">Open modal</a>

Тепер я маю відкрити той же модальний режим, але використовуючи інший URL. Я використовую цей модуль для редагування об'єкта з моєї бази даних. Тож коли я натискаю редагувати сутність, мені потрібно завантажити модаль з ідентифікатором.

<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=1">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=2">Open modal</a>
<a data-toggle="modal" data-target="#myModal" href="edit.aspx?id=3">Open modal</a>

Якщо я натискаю на посилання №1, це працює чудово. Але якщо я потім натискаю на посилання №2, модальний вміст уже завантажений, і для цього він покаже вміст із посилання №1.

Як я можу оновити або скинути вміст, завантажений ajax, у модальному спливаючому вікні twitter?

У мене є та ж проблема, і я думаю, що способом цього буде видалення атрибута перемикання даних та встановлення спеціального обробника посилань.

Щось у рядках:

$("a[data-target=#myModal]").click(function(ev) {
    ev.preventDefault();
    var target = $(this).attr("href");

    // load the url and show modal on success
    $("#myModal .modal-body").load(target, function() { 
         $("#myModal").modal("show"); 
    });
});

Спробуй це пізніше та опублікуй коментарі.

Щоб вивантажити дані, коли модальний закритий, ви можете використовувати це з Bootstrap 2.x:

$('#myModal').on('hidden', function() {
    $(this).removeData('modal');
});

А в Bootstrap 3 ( https://github.com/twbs/bootstrap/pull/7935#issuecomment-18513516 ):

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

//Edit SL: more universal
$(document).on('hidden.bs.modal', function (e) {
    $(e.target).removeData('bs.modal');
});

Ви можете змусити Modal оновлювати спливаюче вікно, додавши цей рядок наприкінці методу приховування модуля Modal (Якщо ви використовуєте bootstrap-translation.js v2.1.1, він повинен бути у рядку 836)

this.$element.removeData()

Або зі слухачем події

$('#modal').on('hidden', function() {
    $(this).data('modal').$element.removeData();
})

За допомогою Bootstrap 3 ви можете використовувати обробник подій 'hidden.bs.modal' для видалення будь-яких даних, пов’язаних з модальним режимом, змушуючи спливаюче вікно перезавантажуватися наступного разу:

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

На основі інших відповідей (дякую всім).

Мені потрібно було налаштувати код на роботу, оскільки просто виклик .html видалив весь вміст, і модальний режим не завантажуватиметься жодним контентом після того, як я це зробив. Тому я просто шукав модальну область вмісту і застосував скидання HTML-кодів там.

    $(document).on('hidden.bs.modal', function (e) {
        var target = $(e.target);
        target.removeData('bs.modal')
              .find(".modal-content").html('');
    });

Ще можна піти з прийнятою відповіддю, оскільки я отримую деякий некрасивий стрибок безпосередньо перед модальними навантаженнями, оскільки управління відбувається з Bootstrap.

Трохи більш стислий, ніж прийнятий вище приклад. Схоплює ціль із цілі даних поточного клацання будь-що, увімкнувши перемикач даних = модальний. Це робить його таким, що вам не доведеться знати, що таке ідентифікатор цільового модалу, просто повторно використовуйте той самий! менше коду = виграш! Ви також можете змінити це для завантаження заголовка, міток та кнопок для вашого модалу, якщо хочете.

 $("[data-toggle=modal]").click(function(ev) {
    ev.preventDefault();
    // load the url and show modal on success
    $( $(this).attr('data-target') + " .modal-body").load($(this).attr("href"), function() { 
         $($(this).attr('data-target')).modal("show"); 
    });
});

Приклад посилань:

<a data-toggle="modal" href="/page/api?package=herp" data-target="#modal">click me</a>
<a data-toggle="modal" href="/page/api?package=derp" data-target="#modal">click me2</a>
<a data-toggle="modal" href="/page/api?package=merp" data-target="#modal">click me3</a>

Я змінив відповідь Softlion , тому всі мої модалі не оновлюються приховано. Модалі з атрибутом data-refresh = 'true' лише оновляються, інші працюють як завжди. Ось модифікована версія.

$(document).on('hidden.bs.modal', function (e) {
    if ($(e.target).attr('data-refresh') == 'true') {
        // Remove modal data
        $(e.target).removeData('bs.modal');
        // Empty the HTML of modal
        $(e.target).html('');
    }
});

Тепер використовуйте атрибут, як показано нижче,

<div class="modal fade" data-refresh="true" id="#modal" tabindex="-1" role="dialog" aria-labelledby="#modal-label" aria-hidden="true"></div>

Це забезпечить оновлення лише модалів з data-refresh = 'true'. І я також скидаю модальний html, оскільки старі значення відображаються до тих пір, поки нові не завантажуються, роблячи HTML порожнім виправленням цього.

Ось версія кофескрипту, яка працювала на мене.

$(document).on 'hidden.bs.modal', (e) ->
  target = $(e.target)
  target.removeData('bs.modal').find(".modal-content").html('')

Він буде працювати для всієї версії twitterbootstrap

Код Javascript:

<script type="text/javascript">
/* <![CDATA[ */
(function(){
   var bsModal = null;
   $("[data-toggle=modal]").click(function(e) {
      e.preventDefault();
      var trgId = $(this).attr('data-target'); 
      if ( bsModal == null ) 
       bsModal = $(trgId).modal;
      $.fn.bsModal = bsModal;
      $(trgId + " .modal-body").load($(this).attr("href"));
      $(trgId).bsModal('show');
    });
 })();
/* <![CDATA[ */
</script>

посилання на модальні є

<a data-toggle="modal" data-target="#myModal" href="edit1.aspx">Open modal 1</a>
<a data-toggle="modal" data-target="#myModal" href="edit2.aspx">Open modal 2</a>
<a data-toggle="modal" data-target="#myModal" href="edit3.aspx">Open modal 3</a>

спливаючі модальні

<div id="myModal" class="modal hide fade in">
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save"/>
</div>

Я також застряг у цій проблемі, тоді я побачив, що ідентифікатори модуля однакові. Вам потрібні різні ідентифікатори модалів, якщо ви хочете декілька модалів. Я використовував динамічний ідентифікатор . Ось мій код у haml:

.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

ви можете це зробити

<div id="<%= some.id %>" class="modal hide fade in">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save" />
  </div>
</div>

і ваші посилання на модальні будуть

<a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

Я сподіваюся, що це спрацює для вас.

Ви можете спробувати це:

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

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

$('#my-modal').on 'hidden.bs.modal', (event) ->
  $(this).removeData('bs.modal').children().remove()

var $ table = $ ('# myTable2');
$ table.bootstrapTable ('знищити');

Працювали для мене

крок 1: Створіть обгортку для модального виклику clone-modal-wrapper.

крок 2: Створіть порожній дів під назвою modal-wrapper.

Крок 3: Скопіюйте модальний елемент з clone-modal-wrapperу modal-wrapper.

крок 4: Увімкніть режим модалі modal-wrapper.

<a data-toggle="modal" class='my-modal'>Open modal</a>

<div class="clone-modal-wrapper">
   <div class='my-modal' class="modal fade">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <a class="close" data-dismiss="modal">×</a>
               <h3>Header</h3>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
               <input type="submit" class="btn btn-success" value="Save"/>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="modal-wrapper"></div>


$("a[data-target=#myModal]").click(function (e) {
    e.preventDefault();
    $(".modal-wrapper").html($(".clone-modal-wrapper").html());
    $('.modal-wrapper').find('.my-modal').modal('toggle');
});