Как переключать фрагменты верстки на странице jsp при нажатии на кнопку

155

17 ноября 2021, 04:40

Есть страница jsp.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <link id="info-link" rel="stylesheet" type="text/css" th:href="${bank.getStyle()}">
    <script type="text/javascript" src="js/admin.js"></script>
    <title> Test </title>
</head>
<body>
<form id="mform" name="test" method="post" action="/main/sendUser">
        <input id = "bt" type="button" value="Я админ" onclick="sendAdmin()">
</form>
    <div id = "frag" th:insert="fragments/footer :: copy"></div> // t1
</body>
</html>

Я использую Thymeleaf и подставляю в строке t1 фрагмент из другой jsp. Как сделать так, чтобы при нажатии кнопки $("#bt"), в строке t1 появился другой фрагмент. Например, при нажатии на кнопку $("#bt") строка t1:

   <div id = "frag" th:insert="fragments/footer :: copy"></div>

изменилась на

  <div id = "frag" th:insert="fragments/button:: bt"></div>

Пытаюсь изменить div в admin.js след. способами, но это не работает

function sendAdmin() {
     document.getElementById("frag").insert = "fragments/button :: bt"; //1
      document.getElementById("frag").setAttribute("insert", "fragments/button :: bt"); //2
}

Answer 1

Ваш способ не работает просто потому, что таймлифовские фрагменты заменяются на куски HTML-кода на стороне сервера, то есть клиент (браузер) ничего не знает ни о каких фрагментах и преобразованиях, над ними выполняемыми. Чтобы убедиться в этом, запустите приложение, перейдите на страницу и посмотрите её HTML (Ctrl+U для Chrome) - там не будет никаких следов th:insert, а на их месте будет HTML, соответствующий тому фрагменту, который вы туда вставляете.

Javascript в вашем случае манипулирует страницей уже на стороне клиента, в браузере. Он ничего не знает ни об атрибуте "insert", ни о том, как обрабатывать его значение. Это делается на стороне сервера.

Чтобы сделать фрагмент невидимым, сделайте его по умолчанию "hidden". Затем, по нажатию кнопки, можете менять видимость (id, кстати, надо присваивать не тому div, в который вы вставляете фрагмент, а самому фрагменту, который вы вставляете):

document.getElementById("frag").style.visibility = "hidden";
document.getElementById("frag").style.visibility = "visible";

или можете использовать "display":

document.getElementById("frag").style.display = "none";

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как переключать фрагменты верстки на странице jsp при нажатии на кнопку

Валидация XmlDocument, используя несклько Xsd схем

обновление проекта c#

Сортировка поверх группировки LINQ

Unity Rigidbody.Addforce Impulse