E.PreventDefault () пропущен для модальной нагрузки
-
21-12-2019 - |
Вопрос
Я нашел этот код, который использует AJAX для загрузки модала, это просто то, что мне нужно для загрузки динамических модалей из моих источников данных. У меня есть настройка тега для загрузки модального вот пример
<a class="blue" href="/api/getmodal/products/' + str(self.result.ids) + '" data-toggle="modal">
<i class="icon-zoom-in bigger-130"></i>
</a>
.
Ссылка отправляется в модальный код и просто модальный код Последний раздел - это идентификатор продукта, который он добавляет, что он создает уникальный запрос на API, который затем обслуживает эту страницу. Я играю с кодом по этой ссылке jQuery ajax bootstrap модальная загрузка сейчас, это проблема Это вместо Gensodicetagcode работает, похоже, игнорирует его и перейти к ссылке, может кто-нибудь увидеть, что я мог бы сделать неправильно здесь. Искал ошибки, и в бегом, похоже, нет никаких ошибок, и он не попадает в функцию кликов из того, что я нашел, но продолжал пытаться исправить, пока я жду ответов.
Редактировать:
jQuery правильно загружен над этим кодом, который я использую Jinja2, и все важные JS включены в мой базовый шаблон, а затем включены в мой ребенок, используя e.preventDefault
, то все остальные скрипта запускаются под этим, есть еще один бит JavaScript, который работает до Это отлично работает, что только для DataTable, я буду включать в себя весь раздел JS ниже. Разделы Console.log являются только для моей отладки, чтобы увидеть, достигает ли он кода.
jQuery(function($) {
var oTable1 = $('#sample-table-2').dataTable( {
"sAjaxSource": '/api/products/datatables',
"aoColumns": [
null, null,null, null, null,
{ "bSortable": false }
] } );
$('table th input:checkbox').on('click' , function(){
var that = this;
$(this).closest('table').find('tr > td:first-child input:checkbox')
.each(function(){
this.checked = that.checked;
$(this).closest('tr').toggleClass('selected');
});
});
})
$(document).ready(function() {
// Support for AJAX loaded modal window.
$('[data-toggle="modal"]').click(function(e) {
sleep(10000)
e.preventDefault();
console.log('point two');
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
console.log('point two');
sleep(1000);
} else {
$.get(url, function(data) {
$('<div class="modal hide fade">' + data + '</div>').modal();
console.log('point three');
});
}
});
});
.
<Сильные> Редактировать: Ссылка на модаль - это просто маршрут WebApp2, который я знаю, что маршрут работает правильно, поскольку он загружает содержимое модала, но без стилирования, поскольку он должен быть добавлен на главную страницу и не нуждается в этом.
<Сильные> Редактировать: От чтения документов Bootstrap Это то, что я придумал, что это больше не загружается на страницу, но модаль не работает, я думаю, что у меня есть правильно, но не уверен.
<a class="blue" data-toggle="modal" href="/api/getmodal/products/' + str(self.result.ids) + '" data-target="#modalProduct" >
<i class="icon-zoom-in bigger-130"></i>
</a>
. Решение
Атрибут Data-Toggle="Modal" является частью API Bootstraps.Здесь есть несколько других вещей, которые прикрепляют слушателей событий к таким элементам и то, что вы видите, это на самом деле два события происходит.Тот, который вы поймаете в своем обработчике клика, и тот, который зарегистрирован API Bootstraps.
вместо использования API атрибута данных, чтобы init Ваш модальный захват, который вы уже делаете, и инимите модаль.Код INIT будет выглядеть похожим на это:
$('#myModal').modal({
remote:url
});
.
Дополнительно, если вы хотите задержать отображение модального до более позднего точка (после init), вы можете сделать что-то подобное:
$('#myModal').modal({
remote:url,
show:false
});
.
Проверьте документацию Bootstraps для получения дополнительной информации, на которой я нашел ее довольно на месте.