Edit this page | Blame

Bug when using HTMX Ajax Post request


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


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");

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


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)