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

Я использую модальное всплывающее окно 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-transition.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. Это делает так, что вам не нужно знать, что такое идентификатор целевого модального окна, просто используйте тот же самый! меньше кода = выигрыш! Вы также можете изменить это, чтобы загрузить заголовок, метки и кнопки для вашего модального окна, если хотите.

 $("[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 исправляет это.

Вот версия coffeescript, которая у меня сработала.

$(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: Создайте пустой div с именем 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');
});