Actualmente estoy aprendiendo a usar thymeleaf y javascript. Quiero crear un encabezado, y cuando haga clic en el avatar del usuario, aparecerá un menú desplegable.
El problema que estoy contrarrestando es cuando agrego la etiqueta <script> a mi fragmento de encabezado, cuando hago clic en el botón, la consola me da ReferenceError, función no encontrada.
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5"> <head> <meta charset="UTF-8"> </head> <body> <header th:fragment="header" class="global-header"> <!-- Logged in show the user's avatar--> <div class="profile bulge-icon" sec:authorize="isAuthenticated()"> <button class="profile-btn" id="profile-btn" th:onclick="dropdown()"> <img class="img" alt="user profile picture" th:src="@{images/profile-placeholder.png}"/> </button> <div id = "dropdown-menu"> <form th:action="@{/logout}" method="post"> <button type = "submit" class="sign out bulge-icon" aria-label="sign out">Sign Out</button> </form> </div> </div> </header> <script type="text/javascript" th:src="@{/js/jquery/header.js}"></script> </body> </html>Para que este js funcione, necesito agregar el archivo .js a mi página que usa el fragmento de encabezado. Por ejemplo, mi test.html.
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/header.css}"/> </head> <body> <header th:replace="global/header :: header"></header> <script type="text/javascript" th:src="@{/js/jquery/header.js}"></script> </body> </html> ¿Existe algún método para permitir que .js funcione cuando se coloca la etiqueta <script> en mi header.html? Entonces, de esta manera, no necesito agregar header.js a cada página que usa el fragmento de encabezado.
Cuando usa th:replace , Thymeleaf literalmente tomará el contenido de ese elemento <header> y lo colocará en su página principal. Esa línea de JavaScript en su fragmento de encabezado nunca se utilizará.
La forma en que generalmente manejo esto es usando el dialecto de diseño de Thymeleaf para que todas las etiquetas de script necesarias se incluyan en cada página. Consulte https://ultraq.github.io/thymeleaf-layout-dialect/ para obtener información sobre cómo usarlo.
Por ejemplo, cree un archivo layout.html como este:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-iKbFRxucmOHIcpWdX9NTZ5WETOPm0Goy0WmfyNcl52qSYtc2Buk0NCe6jU1sWWNB" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/header.css}"/> <div layout:fragment="page-content"> </div> <script type="text/javascript" th:src="@{/js/jquery/header.js}"></script> </head> </html> Ahora actualice test.html para usarlo:
<!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}"> <head> <title>Test</title> </head> <body> <div layout:fragment="page-content"> <header th:replace="global/header :: header"></header> <!-- Add more content for the test page here --> </div> </body> </html> Si el encabezado debe estar en todas las páginas, también puede moverlo a layout.html .