Обновить содержимое в модальном (twitter bootstrap)

Ответ 1

У меня такая же проблема, и я думаю, что способ сделать это будет удалить атрибут "перетаскивать данные" и иметь собственный обработчик ссылок.

Что-то в строках:

$("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"); 
    });
});

Попробует позже и опубликует комментарии.

Ответ 2

Чтобы разгрузить данные при закрытии модала, вы можете использовать это с помощью 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');
});

Ответ 3

Вы можете заставить Modal обновить всплывающее окно, добавив эту строку в конец метода hide модуля Modal (если вы используете bootstrap-transition.js v2.1.1, он должен быть на линии 836)

this.$element.removeData()

Или с прослушивателем событий

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

Ответ 4

С помощью Bootstrap 3 вы можете использовать обработчик событий "hidden.bs.modal" для удаления любых связанных с модальным данными данных, заставляя всплывающее меню перезагружать следующий раз:

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

Ответ 5

Основываясь на других ответах (спасибо всем).

Мне нужно было настроить код для работы, поскольку простое вызов .html уничтожил весь контент, и модаль не загрузился ни с каким контентом после того, как я это сделал. Поэтому я просто искал область содержимого модальности и применял сброс HTML там.

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

По-прежнему может идти с принятым ответом, поскольку я получаю некоторый уродливый прыжок непосредственно перед модальными нагрузками, поскольку элемент управления имеет Bootstrap.

Ответ 6

Немного более сжатый, чем приведенный выше пример. Захватывает цель из цели данных текущего щелкнула что-либо с помощью data-toggle = modal. Это делает так, что вам не нужно знать, что такое идентификатор целевого модального, просто повторите его использование! less code = win! Вы также можете изменить это, чтобы загрузить заголовок, ярлыки и кнопки для своего модального, если хотите.

 $("[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>

Ответ 7

Я сделал небольшое изменение в 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>

Это позволит убедиться, что обновлены только модалы с обновлением данных = 'true'. И я также перезаписываю модальный html, потому что старые значения отображаются до тех пор, пока новые не загрузятся, создавая html пустые исправления.

Ответ 8

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

Я надеюсь, что это сработает для вас.

Ответ 9

Он будет работать для всех версий 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>

pop up modal

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

Ответ 10

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

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

Ответ 11

Вы можете попробовать это:

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

Ответ 12

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

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

Ответ 13

var $ table = $ ('# myTable2');
$ Table.bootstrapTable( 'уничтожить');

Работал для меня