I’m coding a chat app, i’m trying to abort requesting a chat if the requested chat id is already displayed (to prevent unnecesary requests) with this code:
htmx.logger = async function(elt, event, data) {
// cancel the request if the requested chats is already displayed.
if(event === 'htmx:beforeRequest' && data.pathInfo.requestPath.includes('display_chat')){
console.log('Logger called:', event, data);
const displayed_chat = document.getElementById('displayed-chat-info')
if(displayed_chat){
const url_params = data.pathInfo.requestPath.split('/')
const chat_id = displayed_chat.dataset.displayedChat
// if the id of the displayed chat is the same as requested chat id
// abort the request
if(chat_id === url_params[url_params.length - 1]){
data.xhr.abort()
htmx.trigger(elt, 'htmx:abort')
}
}
}
}
htmx.logger()The problem there is that I’ve debugged all the things and everything is “fine” except by the fact that htmx:abort isn’t aborting the request.
I checked if the htmx:abort event was triggered in the first place and it is, I also checked if the html element (elt) getting the abort event was the same that issued the beforeRequest and it is, I don’t know what’s happening, I’ve checked the documentation and my code should work because it’s said that “This event is triggered before an AJAX request is issued. If the event is cancelled, no request will occur.”
Remember that ‘event’ in the htmx logger is a String and not an actual event, so I can’t use event.preventDefault() here.