summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlexander_Kabui2024-05-28 18:21:13 +0300
committerAlexander_Kabui2024-05-28 18:21:13 +0300
commit8d99e645f9a05062ea837f8eaa2c0477791a5ce8 (patch)
treeb478dadc216521387237ca281ba85018715df657
parent787acf11d5c28be6dbec32d99b40e269cb50aec2 (diff)
downloadgn-gemtext-8d99e645f9a05062ea837f8eaa2c0477791a5ce8.tar.gz
Fix syntax for issue: htmx-error-handling
-rw-r--r--issues/htmx-error-handling.gmi17
1 files changed, 11 insertions, 6 deletions
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