Semantic UI Модальный закрывается, как только он открывается - PullRequest
Новая
       5

Semantic UI Модальный закрывается, как только он открывается

0 голосов
/ 25 сентября 2018

Я новичок в 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: действие в модале обзора, чтобы написать комментарий к тому же полю, в котором он находился ... но я собирался выяснить это, когда получил модальноеоставайся открытым.:)

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

...