Я использую загрузчик 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>
Когда я нажимаю на любую из этих ссылок в первый раз, я вижу правильный контент, но когда я нажимаю на другие ссылки, он показывает тот же контент, загруженный в первый раз, он не обновляет контент.
Я хочу, чтобы он обновлялся при каждом нажатии.
PS: я легко могу заставить его работать с помощью пользовательской функции jQuery, но я хочу знать, возможно ли это с нативной модальной удаленной функцией Bootstrap, так как это должно быть достаточно просто, и я думаю, я просто усложняю вещи.
jquery
jquery-plugins
twitter-bootstrap
modal-dialog
Дхрув Кумар Джа
источник
источник
remote
модалы устарели с Bootstrap v3.2.1 и исчезнут в v4.Ответы:
Проблема двоякая.
Первый , после создания экземпляра модального объекта он постоянно присоединяется к элементу, указанному
data-target
последующими вызовами, чтобы показать, что модальный вызовет толькоtoggle()
его, но не обновит значения вoptions
. Таким образом, даже еслиhref
атрибуты у разных ссылок разные, при переключении модального режима значение дляremote
не обновляется. Для большинства вариантов можно обойти это, непосредственно редактируя объект. Например:Однако в этом случае это не сработает, потому что ...
второй , плагин Modal предназначен для загрузки удаленного ресурса в конструкторе объекта Modal, что, к сожалению, означает, что даже если в него будет внесено изменение
options.remote
, оно никогда не будет перезагружено .Простое решение - уничтожить модальный объект перед последующим переключением. Один из вариантов - просто уничтожить его после того, как он закончит скрываться:
Примечание: отрегулируйте селекторы по мере необходимости. Это самое общее.
Plunker
Или вы можете попытаться придумать более сложную схему, например, проверить, отличается ли ссылка, запускающая модал, от предыдущей. Если это так, уничтожь; если это не так, то нет необходимости перезагрузить.
источник
hide
класс по модалу, поэтому, если ваше окно было слишком маленьким, модал мог блокировать события мыши на кнопках. По какой-то причине JSFiddle.net сегодня очень плох (получил 504 попытки обновить), поэтому я просто переделал пример на plnkr.co, который в любом случае лучше для AJAX.bs.modal
у$(this).removeData('bs.modal')
меня работал с Bootstrap 3$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
var modalData = $(this).data('bs.modal'); if (modalData && modalData.options.remote)...
Для начальной загрузки 3 вы должны использовать:
источник
remoteData
строки:$(this).empty()
$(this).empty()
.remote
Опция загружает удаленные данные в гнездовой<div class="modal-content">
элемент. Используйте$('.modal-content', this).empty();
вместо этого.В Bootstrap 3.1 вы захотите удалить данные и очистить
modal-content
диалоговое окно, а не весь (3.0), чтобы избежать мерцания во время ожидания загрузки удаленного контента.Если вы используете не удаленные модалы, то приведенный выше код, конечно, удалит их содержимое после закрытия (плохо). Возможно, вам нужно что-то добавить к этим модалам (например,
.local-modal
класс), чтобы они не были затронуты. Затем измените код выше:источник
$(e.target).removeData("bs.modal").find(".modal-content").empty();
это, как будто мой модал каким-то образом скрывается и появляется только серый наложение.Спасибо, Мерв. Я начал возиться с boostrap.js, но ваш ответ - быстрый и чистый обходной путь. Вот что я использовал в своем коде.
источник
Принятый ответ не сработал для меня, поэтому я решил использовать JavaScript.
источник
Это работает с Bootstrap 3 FYI
источник
Мой проект построен на Yii и использует плагин Bootstrap-Yii, поэтому этот ответ актуален только в том случае, если вы используете Yii.
Вышеупомянутое исправление сработало, но только после первого показа модального режима. В первый раз все вышло пустым. Я думаю, это потому, что после моего инициирования кода Yii вызывает функцию скрытия модального пространства, тем самым очищая мои переменные инициации.
Я обнаружил, что выполнение вызова removeData непосредственно перед тем, как код, запустивший модал, сработало. Так что мой код структурирован так ...
источник
В Bootstrap 3.2.0 событие «on» должно быть в документе, и вы должны очистить модал:
В Bootstrap 3.1.0 событие on может быть на теле:
источник
Почему бы не сделать его более общим с BS 3? Просто используйте «[что-то] модальное» в качестве идентификатора модального DIV.
источник
Единственный рабочий вариант для меня это:
Я использую Bootstrap 3, и у меня есть функция,
popup('popup content')
которая добавляет модальное поле html.источник
Добавление $ (this) .html (''); чтобы очистить видимые данные, и это работает довольно хорошо
источник
Если указан удаленный URL-адрес, контент будет загружен один раз с помощью метода загрузки jQuery и вставлен в div .modal-content. Если вы используете data-api, вы можете использовать атрибут href для указания удаленного источника. Пример этого показан ниже
источник
Я добавил что-то вроде этого, потому что старый контент показывается до появления нового, а .html ('') внутри .modal-content будет очищать HTML внутри, надеюсь, это поможет
источник
Я написал простой фрагмент, посвященный обновлению модального стиля. По сути, он сохраняет нажатую ссылку в данных модального окна и проверяет, является ли это та же ссылка, по которой щелкали, удаляя модальные данные или нет.
источник
Для Bootstrap 3 в modal.js я изменил:
в
(добавлен дополнительный интервал для ясности)
Это предотвращает любую нежелательную флэш-память старого модального содержимого, вызывая empty () для модального контейнера, а также удаляя данные.
источник
Этот работает для меня.
источник
Этот другой подход хорошо работает для меня:
источник
Какой элемент HTML вы хотите очистить, как (div, span независимо).
источник
Этот работает для меня:
модальный
скрипт
область ссылок - это область, в которую я помещаю данные и которую нужно очистить
источник
Расширенная версия принятого ответа от @merv. Он также проверяет, загружен ли скрытый модал из удаленного источника, и очищает старый контент, чтобы предотвратить его мигание.
https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5
источник
Протестировано на Bootstrap версии 3.3.2
источник
.removeData()
без параметров скажет jquery удалить все данные, связанные с этим элементом. Что касается проблемы Ора в то,.removeData('bs.modal')
или.removeData('modal')
будет достаточно и очень безопасно.Удачи с этим:
источник