From 83e542b880ac6b82dbb6a5355583fabf2c5150f2 Mon Sep 17 00:00:00 2001
From: Oliver Geisel <geisel.oliver@googlemail.com>
Date: Mon, 30 Sep 2024 10:55:01 +0200
Subject: [PATCH] #98 - Enable htmx-request again adding hint for the dialect

Fix the syntax to enable the processing of the htmx-request
Add comment and link to the thymeleaf htmx processing
---
 readme.adoc                                 | 2 ++
 src/main/resources/templates/guestbook.html | 7 ++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/readme.adoc b/readme.adoc
index f668337..b565d35 100644
--- a/readme.adoc
+++ b/readme.adoc
@@ -148,3 +148,5 @@ Library to build dynamic web applications using HTML and JavaScript (AJAX).
 
 - https://htmx.org[Overview]
 - https://htmx.org/docs[Tutorial-Documentation]
+- Special Thymeleaf dialect to integrate HTMX:
+https://github.com/wimdeblauwe/htmx-spring-boot[Github]
diff --git a/src/main/resources/templates/guestbook.html b/src/main/resources/templates/guestbook.html
index 582d062..3b2aaa8 100644
--- a/src/main/resources/templates/guestbook.html
+++ b/src/main/resources/templates/guestbook.html
@@ -26,8 +26,9 @@ <h1 class="text-center" th:text="#{guestbook.title}">Gästebuch</h1>
 					<div class="card-header">
 						<form sec:authorize="hasRole('ADMIN')" th:method="delete" th:action="@{/guestbook/{id}(id=${entry.id})}" th:attr="data-entry-id=${entry.id}">
 							<button th:title="#{guestbook.form.delete}" class="btn btn-sm float-right"
-							        hx-delete="@{/guestbook/{id}(id=${entry.id})}"
-							        hx-target="'#entries'">
+							        hx:delete="@{/guestbook/{id}(id=${entry.id})}" hx-target="#entries">
+									<!-- the ':' is necessary, when Thymeleaf expression is used
+									this dialect is enabled by htmx-spring-boot-thymeleaf dependency in pom-->
 								<span class="fas fa-times"></span>
 							</button>
 						</form>
@@ -43,7 +44,7 @@ <h4 th:text="${index} + '. ' + ${entry.name}" class="card-title">1. Posting</h4>
 			</div>
 		</div>
 
-		<form method="post" role="form" class="gb-form" id="form" hx-post="@{/guestbook}" hx-target="#entries"
+		<form method="post" role="form" class="gb-form" id="form" hx-post="/guestbook" hx-target="#entries"
 			  hx-swap="beforeend" _="on entryAdded me.reset()" th:action="@{/guestbook}" th:object="${form}">
 			<div class="form-group">
 				<label for="name" th:text="#{guestbook.form.name}">Name</label><br />