Как прикрепить результаты jQuery к модальному окну и отобразить этот HTML без проблем с форматированием? - PullRequest
Новая
       36

Как прикрепить результаты jQuery к модальному окну и отобразить этот HTML без проблем с форматированием?

0 голосов
/ 05 ноября 2019

У меня есть колонки в 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>
...