У меня есть колонки в MySQL, которые включают в себя необработанный HTML (только вещи внутри табличных тегов), которые я пытаюсь показать в модальном окне.
Я успешно извлекаю эти данные, используя jQuery и Coldfusion.
Тем не менее, я не знаю, как прикрепить эти данные из jQuery к модальному, и когда я пытаюсь отобразить этот HTML в модальном (просто скопировать / вставить из БД), это вызывает проблемы для остальныхстраницы, поскольку иногда HTML в БД является беспорядком.
Мне нужно выяснить, как прикрепить мой ответ JQuery к модальному и как убедиться, что HTML из БД «содержится» внутриэтот модальный и не влияет на HTML страницы.
Поскольку я работаю с некоторым существующим кодом, мне не повезло, пытаясь объединить вещи, которые я нашел в Интернете (включая Dialog).
Редактировать: Я добавил div с идентификатором 'cs0' в модальное окно, а также попытался прикрепить его к части Jquery. Я предполагаю, что я не делаю сторону Jquery правильно.
Модал:
<input id="clickID-#key#" name="" type="button" value="View Modal" />
<div id="modal-#key#" class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="" >
<div class="">
<div class="">
<div class="modal-title">
<h2 class="" id="myModalLabel">Case Number: #custom1#</h2>
</div>
<div class="modal-body">
<div id="cs0"></div>
<img src="" id="clickImage-#key#" style="max-width:800px"/>
</div>
<div class="">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JQuery:
$(document).ready(function() {
$("##paginatedTable").on("click", "##clickID-#key#", function(){
console.log('#key#');
var dataSent = {'key':'#key#'};
$.ajax({
url: 'inc/_data_ruling_load.cfm',
type: 'POST',
data: dataSent,
success: function (response) {
var res = JSON.parse(response);
console.log(response);
console.log(response);
$('##clickImage-#key#').attr('src',res.img);
$('##modal-#key#').modal('show');
$('##cs0').text('response').dialog();
console.log(response);
},
error: function () {
alert("error");
}
});
});
});
Связанные файлы:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>