Edit this page | Blame

Bug when using HTMX Ajax Post request

Tags

  • type: bug
  • priority: high
  • status: open
  • assigned: alexm
  • keywords: htmx,error,javascript,api

Description

The issue occurs when you send a post request using HTMX javascript Api.this does not provide a well defined way to handle errors from the callback A code snippet can be show below to reproduce the issue:

  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}}).then(()=>{
	  htmx.toggleClass(htmx.find('#upvote'), 'btn-success');
	  htmx.removeClass(htmx.find("#downvote"), "btn-danger");
})
.catch((err)=>{
alert("html")
})
});

In the above snippet; incase of a response error you would expert the catch error method to be invoked but only the success callback is invoked This is the htmx api docs which does not provide a proper error handling mechanism

Note

the reason for using the htmx javascript api is to toggle the rating class for both like and dislike functionality depending if the requests fails or succeeds An alternative would be to explore using javascript/jquery to achieve this(TODO)

(made with skribilo)