Estoy luchando con un problema para mostrar un formulario condicionalmente usando Thymeleaf. Quiero mostrar un formulario como en la imagen de abajo: Ocultar formulario usando Thymeleaf
Inicialmente, la columna de identificación de recogida debe mostrar algún texto como 'editar' o 'n/a' con un enlace y cuando el usuario hace clic en el enlace (o botón), solo el cuadro de edición debe estar visible como en la imagen.
Como puede ver, ya he creado el formulario, pero tengo problemas para ocultar el formulario y mostrarlo solo al hacer clic en un enlace o botón y cuando el usuario hace clic en guardar, la identificación se guarda en la base de datos (ya está hecho) y la identificación ingresada debe mostrarse en lugar del formulario. Busqué mucho al respecto pero no pude encontrar nada usando thymeleaf. Encontré algunas respuestas relacionadas usando JavaScript/jQuery pero necesito Thymeleaf.
La parte relevante del código.
<td> <a><span th:if="${ticket.pickedUp} ? ${ticket.pickUpId} : 'N/A'"></span> <form th:action="@{/updatePickupId/{id}(id=${ticket.id})}" th:method="post" th:style="'display: hidden'"> <div class="checkbox-list w-150px"> <input type="text" name="pId" value="" placeholder="Pick Up Id" th:classappend="${ticket.pickedUp} ? 'required' : ''"> <input type="submit" value="Save"/> </div> </form> </a> </td> Como puede ver, he usado th:style="'display: hidden'" en el formulario, pero no sé por qué no funciona y el formulario está visible todo el tiempo.