Django + HTMX: Any idea on how to display HTMX error with an alert

[vernal bronze]

I am using HTMX and sweetalert to delete rows in a wishlist. I want to display an alert in cases of an error like probably the internet goes offline. It would be a great user-experience to let them know that the deletion failed. I can't handle it directly with Django since it is an HTMX error. I went through the docs and the error i a to handle is htmx:responseError. Every solution I saw online was about swapping but all I want to do is display an alert. Any idea on how to do that. Below is my code,

      document.body.addEventListener('htmx:confirm', function(evt) {
        if (evt.target.getAttribute('confirm-with-sweet-alert') === 'true') {
          evt.preventDefault(); // Prevent the request from being sent immediately

          Swal.fire({
            title: 'Remove from Wishlist?',
            text: 'This item will be removed from your wishlist',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, remove it!'
          }).then((result) => {
            if (result.isConfirmed) {
              console.log(result)
              const row = evt.target.closest('tr'); // Get the closest table row
              row.classList.add('fade-out'); // Add the fade-out class

              evt.detail.issueRequest(); // Proceed with the HTMX request
            }
          });
        }
      });

    </script>```

hi

            class="btn btn-danger btn-sm remove-btn" 
            hx-delete="{% url 'shop:remove_from_wishlist' product.id %}" 
            hx-target="#wishlist-content" 
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' 
            confirm-with-sweet-alert="true"
            
          >Remove</button>```

[lone spire]

Looks like you'll want to register an event to listen to htmx:responseError and display an alert there? https://htmx.org/docs/#events

[vernal bronze]

It doesn't seem to work

htmx.on('htmx:afterRequest', function(evt) {
if (evt.detail.failed) { // Check if the request failed
const errorMessage = evt.detail.xhr.responseText || "An error occurred. Please try again later.";

      Swal.fire({
        title: 'Error',
        text: errorMessage,
        icon: 'error',
        confirmButtonColor: '#dc3545'
      });
    }
  });

[lone spire]

In what way?

[vernal bronze]

I used console.log() to know if the htmx:afterRequest is triggering but i don't get any result in the terminal. But even without logging to the console when i set Network tabs to offline and I click on remove the console logs 2 errors: HtmxAfrterRequest and SendError

[lone spire]

I would recommend adding a debug handler like suggested here, to see what events are actually firing: https://htmx.org/docs/#logging

[vernal bronze]

It doesn't log anything to the console. I am not sure what the problem is.

This works but I can only use alert()
hx-on::send-error="alert('error')"

[vernal bronze]

It works now, It was a syntax error in my code. But I am still trying to figure out how to make the alert work. I can see the htmx errors in the console

[vernal bronze]

It worked. Finally. Thank you.

[lone spire]

Great. What was the solution in the end?

[vernal bronze]

I used the resources you sent. At first why it wasn't displaying was a syntax error. After fixing it. I logged the errors to the console. Used network tab to set it to offline, tried deleting, then looked at the error logged to the console. So I picked the most specific which is sendError then i applied the toast to it. So that was it.