Проблема с передачей данных из таблицы в модальное окно

Question

Пытаюсь внести данные в модальное окно и никак не выходит. В коде ниже формируется таблица. И соответственно интересует формирование кнопки Delete.

                            <table class="table table-striped table-hover">
                                <thead>
                                <tr>
                                    <th class="text-left">ID</th>
                                    <th class="text-left">First Name</th>
                                    <th class="text-left">Last Name</th>
                                    <th class="text-left">Age</th>
                                    <th class="text-left">Email</th>
                                    <th class="text-left">Role</th>
                                    <th class="text-left">Edit</th>
                                    <th class="text-left">Delete</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="users : ${users}">
                                    <td th:utext="${users.id}">ID</td>
                                    <td th:utext="${users.name}">Name</td>
                                    <td th:utext="${users.lastname}">LastName</td>
                                    <td th:utext="${users.age}">age</td>
                                    <td th:utext="${users.login}">login</td>
                                    <td th:utext="${users.roleSet}"></td>
                                    <td>
                                        <div class="text-left">
                                            <button type="button" class="btn btn-info" data-toggle="modal"
                                                    data-target="#ModalUpdate">Edit
                                            </button>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-left">
                                            <button type="button" class="btn btn-danger Delete">Delete
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

Код модального окна в котором я хочу отображать поля.

<!-- Modal Delete-->
<div class="modal fade" id="ModalDelete" tabindex="-1" role="dialog"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="Delete_Title">Delete user</h5>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <strong> ID </strong>
                    <br>
                    <input class="text-center" disabled size="50" type="text" id="id" value="">
                    <br>
                    <br>
                </div>
                <div class="text-center">
                    <strong> First name</strong></label>
                    <br>
                    <input class="text-center" disabled size="50" type="text"
                           th:value=$"users.name">
                    <br>
                    <br>
                </div>
            </div>
            </p>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                        data-dismiss="modal">Close
                </button>

Скрипт который должен дергать поля из таблицы. И вот тут похоже основные проблемы

<script>
    var $editRow = null;

    $(".Delete").click(function (e) {
        $editRow = $(this).closest("tr");

        $("#id").val($editRow.data('id'));
        $("#name").val($editRow.find(".name").text());

        $("#ModalDelete").modal('show');
    });
</script>

По факту модальное окно не поднимается вообще. Получаю следующую ошибку

o.apache.coyote.http11.Http11Processor : Error parsing HTTP request header Note: further occurrences of HTTP request parsing errors will be logged at DEBUG level.

Answer 1

Замените тег <div> на <dialog> и открывайте так:

$('#ModalDelete')[0].show();

или

$('#ModalDelete')[0].showModal();

<dialog>
<div>
   Тестовый диалог
</div>
<div>
   <button onclick="document.querySelector('dialog').close()">OK</button>
</div>
</dialog>

<button onclick="document.querySelector('dialog').showModal()">Диалог</button>

БЛОГ НА HUSL

Проблема с передачей данных из таблицы в модальное окно

Ответы (1 шт):