Удаленный модальный модуль Twitter загружает одно и то же содержимое каждый раз

Я использую загрузку Twitter, я указал модальный

<div class="modal hide" id="modal-item">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">x</button>
        <h3>Update Item</h3>
    </div>

    <form action="http://www.website.com/update" method="POST" class="form-horizontal">

    <div class="modal-body">
        Loading content...
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <button class="btn btn-primary" type="submit">Update Item</button>
    </div>

    </form>

</div>

И ссылки

<a href="#" onclick="location.href='http://www.website.com/item/1'; return false;" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="#" onclick="location.href='http://www.website.com/item/2'; return false;" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="#" onclick="location.href='http://www.website.com/item/3'; return false;" data-target="#modal-item" data-toggle="modal">Edit 2</a>

Когда я нажимаю на любую из этих ссылок в первый раз, я вижу правильный контент, но когда я нажимаю на другие ссылки, он показывает тот же самый контент, загруженный в первый раз, он не обновляет содержимое.

Я хочу, чтобы он обновлялся каждый раз при нажатии.

P.S: Я могу легко заставить его работать с помощью пользовательской функции jQuery, но я хочу знать, возможно ли это с помощью родной модульной удаленной функции Bootstrap, поскольку она должна быть достаточно простой, и я думаю, что я просто усложняю ситуацию.

Ответ 1

Проблема двояка.

Первый, после создания объекта Modal он постоянно привязывается к элементу, указанному в data-target, и последующим вызовам, чтобы показать, что модаль будет вызывать на нем только toggle(), но не будет обновите значения в options. Таким образом, даже если атрибуты href отличаются друг от друга на разных ссылках, когда модаль переключается, значение для remote не обновляется. Для большинства вариантов можно обойти это, непосредственно отредактировав объект. Например:

$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";

Однако это не будет работать в этом случае, потому что...

Второй, плагин Modal предназначен для загрузки удаленного ресурса в конструктор объекта Modal, что, к сожалению, означает, что даже если внесение изменений в options.remote, оно никогда не будет перезагружается.

Простое средство - уничтожить объект Modal перед последующими переключениями. Один из вариантов заключается в том, чтобы просто уничтожить его после завершения скрытия:

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

Примечание. Отрегулируйте селектора по мере необходимости. Это наиболее общее.

Plunker

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

Ответ 2

Для бутстрапа 3 вы должны использовать:

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

Ответ 3

Для Bootstrap 3.1 вам нужно удалить данные и удалить modal-content, а не весь диалог (3.0), чтобы избежать мерцания во время ожидания загрузки удаленного контента.

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

Если вы используете не-удаленные модалы, то вышеуказанный код, конечно, удалит их содержимое после закрытия (плохо). Возможно, вам придется добавить что-то к этим модалам (например, классу .local-modal), чтобы они не пострадали. Затем измените приведенный выше код на:

$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

Ответ 4

Спасибо, merv. Я начал возиться с boostrap.js, но ваш ответ - быстрое и чистое обходное решение. Вот что я в итоге использовал в своем коде.

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

Ответ 5

Принятый ответ не сработал у меня, поэтому я пошел с JavaScript, чтобы сделать это.

<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">

<script>
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})

Ответ 6

Это работает с Bootstrap 3 FYI

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

Ответ 7

Мой проект построен в Yii и использует плагин Bootstrap-Yii, поэтому этот ответ имеет значение только в том случае, если вы используете Yii.

Вышеупомянутое исправление работает, но только после первого показа модальности. В первый раз он оказался пустым. Я думаю, что, поскольку после моего запуска кода Yii вызывает функцию hide модальности, тем самым очищая мои инициализационные переменные.

Я обнаружил, что вызов removeData сразу перед тем, как код, запускавший модальный, сделал трюк. Итак, мой код структурирован таким образом...

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});

Ответ 8

В Bootstrap 3.2.0 событие "on" должно быть в документе, и вы должны освободить модальный код:

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

В Bootstrap 3.1.0 событие "on" может быть на теле:

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

Ответ 9

Почему бы не сделать его более общим с BS 3? Просто используйте "[что-то] модальное" как идентификатор модального DIV.

$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);

Ответ 10

Для меня только рабочий вариант:

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

Я использую Bootstrap 3, и у меня есть функция, называемая popup('popup content') который добавляет modal box html.

Ответ 11

Добавление $(this).html(''); для очистки видимых данных, а также работает довольно хорошо

Ответ 12

Если предоставляется удаленный URL-адрес, содержимое будет загружаться один раз с помощью метода jQuery load и вводится в div.modal-content. Если вы используете data-api, вы можете альтернативно использовать атрибут href для указания удаленного источника. Пример этого показан ниже

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

Ответ 13

Я добавил что-то вроде этого, потому что предыдущий контент отображается до появления нового, с .html('') внутри .modal-содержимого очистит HTML внутри, надеюсь, что он поможет

$('#myModal').on('hidden.bs.modal', function () {
   $('#myModal').removeData('bs.modal');
   $('#myModal').find('.modal-content').html('');
});

Ответ 14

Я написал простой фрагмент, обрабатывающий обновление модальности. В основном он сохраняет ссылку на клик в модальных данных и проверяет, была ли она той же самой ссылкой, которая была нажата, удалением или отсутствием модальных данных.

var handleModal = function()
{
    $('.triggeringLink').click(function(event) {
        var $logsModal = $('#logsModal');
        var $triggeringLink = $logsModal.data('triggeringLink');

        event.preventDefault();

        if ($logsModal.data('modal') != undefined
            && $triggeringLink != undefined
            && !$triggeringLink.is($(this))
        ) {
            $logsModal.removeData('modal');
        }

        $logsModal.data('triggeringLink', $(this));

        $logsModal.modal({ remote: $(this).attr('href') });
        $logsModal.modal('show');
    });
};

Ответ 15

Для Bootstrap 3 в modal.js я изменил:

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })

к

$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { 
    $(this).removeData('bs.modal').empty()
    $(document.body).removeClass('modal-open')
  })

(добавлено дополнительное расстояние для ясности)

Это предотвращает любую нежелательную вспышку старого модального контента, вызывая пустую() в модальном контейнере, а также удаляя данные.

Ответ 16

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

Это работает для меня.

Ответ 17

Этот другой подход хорошо работает для меня:

$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

Ответ 18

$('body').on('hidden.bs.modal', '.modal', function () {
       $("#mention Id here what you showed inside modal body").empty()
});

Какой элемент html вы хотите удалить как (div, span any).

Ответ 19

Это работает для меня:

модальных

<div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" aria-hidden="true"> <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="SearchKaryawanLabel">Cari Karyawan</h4>
  </div>
  <div class="modal-body">
    <input type="hidden" name="location">
    <input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
    <div class="links-area" id="links-area"></div>
  </div>
  <div class="modal-footer">
  </div>
</div> </div></div>

script

<script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>

link-area - это область, где я помещаю данные и нуждаюсь в очистке

Ответ 20

Расширенная версия принятого ответа от @merv. Он также проверяет, загружен ли модальный из удаленного источника, и удаляет старый контент, чтобы он не мигал.

$(document).on('hidden.bs.modal', '.modal', function () {
  var modalData = $(this).data('bs.modal');

  // Destroy modal if has remote source – don't want to destroy modals with static content.
  if (modalData && modalData.options.remote) {
    // Destroy component. Next time new component is created and loads fresh content
    $(this).removeData('bs.modal');
    // Also clear loaded content, otherwise it would flash before new one is loaded.
    $(this).find(".modal-content").empty();
  }
});

https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5

Ответ 21

Проверено на версии Bootstrap 3.3.2

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

Ответ 22

Удачи вам в этом:

$('#myModal').on('hidden.bs.modal', function () {
    location.reload();
});