Semantic UI Modal закрывается сразу после открытия

Я новичок в Semantic UI, но мне действительно понравилось то, что я видел до сих пор. Я работаю над сайтом / приложением, которое позволяет пользователям просматривать документы с использованием инфраструктуры Spring MVC и Thymeleaf.

Рецензент нажимает кнопку, и открывается PDF-файл с рецензируемым документом. Они могут оставлять комментарии, которые вводятся в базу данных и отображаются в виде таблицы, чтобы автор мог оценить, когда все рецензии будут завершены. Я также хочу добавить возможность рецензенту редактировать комментарии.

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

Модальное окно для добавления комментария работает отлично. Модального окна для обновления комментария нет. Он открывается, загружает содержимое комментария в текстовое поле, а затем сразу закрывается.

Ниже приведен код:

jQuery:

$(document).ready(function() {
    $("#addComment").click(function(){
        $('#addCommentModal').modal('show');
    });

    $(".modifyCommentButton").click(function(){
        $('#modifyCommentModal').modal('show');
        $('#commentInput').val($(this).parent().parent().siblings('.commentContent').text());
     });
 });

Модальные окна:

<div id = "modifyCommentModal" class = "ui basic modal">
    <div class = "ui icon header">
        <i class = "blue plus circle icon"></i>
    </div>
    <div class = "actions">
        <div  class = "content">
            <form  th:action = "@{'/addcomment/'+${review.getTaskId()}}" th:object = "${newComment}" method = "post" class = "ui form">
                <input id = "commentInput" class = "field" type = "text" th:field = "*{comment}" />
                <button id = "modifyButtonAdd" class = "ui green animated inverted fade button" tabindex = "0">
                    <div class = "visible content">Add</div>
                    <div class = "hidden content">
                        <i class = "checkmark icon"></i>
                    </div>
                </button>
                <button id = "modifyButtonCancel" class = "ui red animated inverted fade button cancel" tabindex = "0" type = "reset">
                    <div class = "visible content">Cancel</div>
                    <div class = "hidden content">
                        <i class = "remove icon"></i>
                    </div>
                </button>
            </form>
        </div>
    </div>
</div>

<div id = "addCommentModal" class = "ui basic modal">
    <div class = "ui icon header">
        <i class = "blue plus circle icon"></i>
    </div>
    <div class = "actions">
        <div  class = "content">
            <form  th:action = "@{'/addcomment/'+${review.getTaskId()}}" th:object = "${newComment}" method = "post" class = "ui form">
                <input id = "" class = "field" type = "text" th:field = "*{comment}" />
                <button id = "formButtonAdd" class = "ui green animated inverted fade button" tabindex = "0">
                    <div class = "visible content">Add</div>
                    <div class = "hidden content">
                        <i class = "checkmark icon"></i>
                    </div>
                </button>
                <button id = "formButtonCancel" class = "ui red animated inverted fade button cancel" tabindex = "0" type = "reset">
                    <div class = "visible content">Cancel</div>
                    <div class = "hidden content">
                        <i class = "remove icon"></i>
                    </div>
                </button>
            </form>
        </div>
    </div>
</div>

Я понимаю, что мне нужно другое th: action в модальном окне обзора, чтобы написать комментарий в то же поле, в котором он был ... но я собирался выяснить это, когда у меня модальное окно останется открытым. :)

Любое понимание будет оценено! Спасибо!

Вы пользуетесь Safari?

Lazar Nikolic 25.09.2018 12:17

Нет. Chrome и Firefox.

John McMahon 25.09.2018 16:20

Вы пытались установить текст комментария перед открытием модального окна?

Michael 02.10.2018 09:22
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
3
259
0

Другие вопросы по теме