Я новичок в 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 в модальном окне обзора, чтобы написать комментарий в то же поле, в котором он был ... но я собирался выяснить это, когда у меня модальное окно останется открытым. :)
Любое понимание будет оценено! Спасибо!
Нет. Chrome и Firefox.
Вы пытались установить текст комментария перед открытием модального окна?

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