Как создать динамический модал? - PullRequest
Новая
       7

Как создать динамический модал?

0 голосов
/ 18 июня 2019

Я настраиваю динамическую страницу jsp, которая отображает данные из базы данных MySQL, все нормально, пока я не использовал модал для отображения некоторой информации, но не будет отображать одни данные.

такЯ попытался сделать инъекцию с помощью jquery, но все равно получаю те же вещи

Вот моя модель: 

<button type="button" id="btnModal" class="btn" data-toggle="modal" data-target="#myModal"><img style="width: 25px; height: 25px" src="./Vistas/img/taxista.png"></button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header mark">
                <h4 class="modal-title"></h4>                                                 
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <form class="" action="Controlador">
                <div class="modal-body">

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-danger" value="buscarFecha" data-dismiss="modal">Cerrar</button>
                </div>
            </form>
        </div>
    </div>

Вот div, который я пытаюсь внедрить с помощью jquery: 

<div id="infoModal">
    <div class="modalHeader">                              
        <h4 class="modal-title"><%=t.getNombre()%> <%= t.getNum_licencia()%></h4>
    </div>
    <div class="modalBody">
        Telefono: <%=t.getTelefono()%> <br>
        Marca de coche: <%=t.getMarcaCoche()%> <br>
        Modelo: <%=t.getModelo()%> <br>
        Matricula: <%=t.getMatricula()%> <br>
        Poblacion: <%=t.getPoblacion()%>
    </div>
</div>

и вот jquery: 

<script>
    $(function () {
        var $header = $("#myModal .modal-header"),
                $body = $("#myModal .modal-body");
        $("#btnModal").click(function () {
            var headerContent = $("#infoModal .modalHeader").html();
            $header.html(headerContent);
            var bodyContent = $("#infoModal .modalBody").html();
            $body.html(bodyContent);
        });
    });
</script>


https://jsfiddle.net/zc4rfpwn/

, пожалуйста, помогите

1 Ответ

0 голосов
/ 18 июня 2019

Проблема с вашими селекторами jQuery.

Здесь var $header = $("#myModal .modal-header") вы пытаетесь выбрать элемент с идентификатором myModal и классом .modal-header. Но у вас нет элемента с идентификатором myModal.

Сначала вам нужно добавить идентификатор к вашему модальному элементу.

Затем вам нужно выбрать этот элемент в вашем jQuery с помощью 

var $header = $('#myModal).find('.modal-header');
...