From 8d99e645f9a05062ea837f8eaa2c0477791a5ce8 Mon Sep 17 00:00:00 2001
From: Alexander_Kabui
Date: Tue, 28 May 2024 18:21:13 +0300
Subject: Fix syntax for issue: htmx-error-handling

---
 issues/htmx-error-handling.gmi | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

(limited to 'issues')

diff --git a/issues/htmx-error-handling.gmi b/issues/htmx-error-handling.gmi
index 7705071..044bfa6 100644
--- a/issues/htmx-error-handling.gmi
+++ b/issues/htmx-error-handling.gmi
@@ -14,7 +14,9 @@ The issue occurs when you send a post request using the HTMX JavaScript API. Thi
 ```js
 htmx.on("#upvote", "click", function(evt){
     vote_count = htmx.find(".btn-success") ? 0 : 1;
-    htmx.ajax("POST", `/gnqna/rating/${task_id}/${vote_count}`, {target: "#rate", swap: "innerHTML", values: {'query': query, 'answer': answer}})
+    htmx.ajax("POST", `/gnqna/rating/${task_id}/${vote_count}`,
+    {target: "#rate",
+    swap: "innerHTML", values: {'query': query, 'answer': answer}})
         .then(() => {
             htmx.toggleClass(htmx.find('#upvote'), 'btn-success');
             htmx.removeClass(htmx.find("#downvote"), "btn-danger");
@@ -29,7 +31,7 @@ In the above snippet, in case of a response error, you would expect the catch er
 ## Note
 The reason for using the HTMX JavaScript API is to toggle the rating class for both like and dislike functionality depending on whether the request fails or succeeds. An alternative would be to explore using JavaScript/jQuery to achieve this (TODO).
 
-## Solution
+## Solution 1
 
 * Using the HTMX after request handler:
 
@@ -59,7 +61,7 @@ document.body.addEventListener('htmx:afterRequest', function (evt) {
 
 Note: I found the solution incomplete in my case since this fails to target when using the HTMX JavaScript API and is triggered on all requests for the body.
 
-* Solution 2
+## Solution 2
 
 In my case, I need to handle this when sending Ajax requests via the JavaScript HTMX API:
 From the docs: see: https://htmx.org/api/ the htmx.ajax() method has a context parameter which takes a handler that will handle the response HTML.
@@ -70,7 +72,10 @@ Example:
 // HTMX ajax request via JS API
 htmx.on("#upvote", "click", function(evt){
     vote_count = htmx.find(".btn-success") ? 0 : 1;
-    htmx.ajax("POST", `/gnqna/rating/${task_id}/${vote_count}`, {target: "#rate", handler: (target, obj) => updateRatingHandler(target, obj, "upvote"), swap: "innerHTML", values: {'query': query, 'answer': answer}});
+    htmx.ajax("POST", `/gnqna/rating/${task_id}/${vote_count}`,
+    {target: "#rate",
+    handler: (target, obj) => updateRatingHandler(target, obj, "upvote"),
+    swap: "innerHTML", values: {'query': query, 'answer': answer}});
 });
 ```
 
@@ -82,5 +87,5 @@ function updateRatingHandler(target, responseObj, args){
 ```
 
 Other related issues:
-* https://github.com/bigskysoftware/htmx/issues/701
-* https://www.reddit.com/r/htmx/comments/18bls33/multiple_htmxafterrequestx_events/
\ No newline at end of file
+=> https://github.com/bigskysoftware/htmx/issues/701
+=> https://www.reddit.com/r/htmx/comments/18bls33/multiple_htmxafterrequestx_events/
\ No newline at end of file
-- 
cgit v1.2.3