Я использую загрузку 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="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>
Когда я нажимаю на любую из этих ссылок в первый раз, я вижу правильный контент, но когда я нажимаю на другие ссылки, он показывает тот же самый контент, загруженный в первый раз, он не обновляет содержимое.
Я хочу, чтобы он обновлялся каждый раз при нажатии.
P.S: Я могу легко заставить его работать с помощью пользовательской функции jQuery, но я хочу знать, возможно ли это с помощью родной модульной удаленной функции Bootstrap, поскольку она должна быть достаточно простой, и я думаю, что я просто усложняю ситуацию.
Проблема двояка.
Первый, после создания объекта 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');
});
Примечание. Отрегулируйте селектора по мере необходимости. Это наиболее общее.
Или вы могли бы попробовать придумать более сложную схему, чтобы сделать что-то вроде проверки того, отличается ли ссылка, запускающая модальную, от предыдущей. Если это так, уничтожьте; если это не так, то нет необходимости перезагружать.
Для бутстрапа 3 вы должны использовать:
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
Для 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();
});
Спасибо, merv. Я начал возиться с boostrap.js, но ваш ответ - быстрое и чистое обходное решение. Вот что я в итоге использовал в своем коде.
$('#modal-item').on('hidden', function() {
$(this).removeData('modal');
});
Принятый ответ не сработал у меня, поэтому я пошел с 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")})
})
})
Это работает с Bootstrap 3 FYI
$('#myModal').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
Мой проект построен в Yii и использует плагин Bootstrap-Yii, поэтому этот ответ имеет значение только в том случае, если вы используете Yii.
Вышеупомянутое исправление работает, но только после первого показа модальности. В первый раз он оказался пустым. Я думаю, что, поскольку после моего запуска кода Yii вызывает функцию hide модальности, тем самым очищая мои инициализационные переменные.
Я обнаружил, что вызов removeData сразу перед тем, как код, запускавший модальный, сделал трюк. Итак, мой код структурирован таким образом...
$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});
В 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');
});
Почему бы не сделать его более общим с BS 3? Просто используйте "[что-то] модальное" как идентификатор модального DIV.
$("div[id$='modal']").on('hidden.bs.modal',
function () {
$(this).removeData('bs.modal');
}
);
Для меня только рабочий вариант:
$('body').on('hidden.bs.modal', '#modalBox', function () {
$(this).remove();
});
Я использую Bootstrap 3, и у меня есть функция, называемая
popup('popup content')
который добавляет modal box html.
Я добавил что-то вроде этого, потому что предыдущий контент отображается до появления нового, с .html('') внутри .modal-содержимого очистит HTML внутри, надеюсь, что он поможет
$('#myModal').on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal');
$('#myModal').find('.modal-content').html('');
});
Если предоставляется удаленный URL-адрес, содержимое будет загружаться один раз с помощью метода jQuery load и вводится в div.modal-content. Если вы используете data-api, вы можете альтернативно использовать атрибут href для указания удаленного источника. Пример этого показан ниже
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
Добавление $(this).html(''); для очистки видимых данных, а также работает довольно хорошо
Расширенная версия принятого ответа от @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
Это работает для меня:
модальных
<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">×</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 - это область, где я помещаю данные и нуждаюсь в очистке
$('body').on('hidden.bs.modal', '.modal', function () {
$("#mention Id here what you showed inside modal body").empty()
});
Какой элемент html вы хотите удалить как (div, span any).
Этот другой подход хорошо работает для меня:
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
Проверено на версии Bootstrap 3.3.2
$('#myModal').on('hide.bs.modal', function() {
$(this).removeData();
});
.removeData()
без параметров скажет jquery удалить все данные, прикрепленные к этому элементу. Что касается проблемы OP, то достаточно .removeData('bs.modal')
или .removeData('modal')
и является очень безопасным.
$('#myModal').on('hidden.bs.modal', function () {
$(this).removeData('modal');
});
Это работает для меня.
Для 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')
})
(добавлено дополнительное расстояние для ясности)
Это предотвращает любую нежелательную вспышку старого модального контента, вызывая пустую() в модальном контейнере, а также удаляя данные.
Я написал простой фрагмент, обрабатывающий обновление модальности. В основном он сохраняет ссылку на клик в модальных данных и проверяет, была ли она той же самой ссылкой, которая была нажата, удалением или отсутствием модальных данных.
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');
});
};
Удачи вам в этом:
$('#myModal').on('hidden.bs.modal', function () {
location.reload();
});
remote
модалы устарели начиная с Bootstrap v3.2.1 и исчезнут в v4.