Summary, How do I attach a click and a dblclick on same element in HTMX and also have each of the event executing different request (views).
.I am new to HTMX using django and i have this list
<li class="list-group-item"
hx-get="{% url 'quality:list' competence.pk %}"
hx-target="#quality-list"
hx-trigger="click"
>
it works fine using the click event. I however also want it to execute another view (quality:update) when a dblclick is fired on it. i.e. on same element (li) click should implement details function and dblclick should implement update function
We can modify the request path in the htmx:configRequest HTMX-event depending on the triggering event's type. First, we need to list the triggering events in the hx-trigger attribute. However for the single click event, we also need to add some delay, otherwise the single click event will be also fired twice before the double click event. I set the delay here to 0.5 second, but you can fine tune it for your needs/target audience.
<li class="list-group-item"
hx-get="{% url 'quality:list' competence.pk %}"
hx-target="#quality-list"
hx-trigger="click delay:0.5s, dblclick"
>
We can alter the path in the evt.detail.path property and we can check the triggering event's type at evt.detail.triggeringEvent.type:
<script>
document.body.addEventListener('htmx:configRequest', function(evt) {
evt.detail.path = (evt.detail.triggeringEvent.type === 'dblclick') ?
'{% url 'quality:update' competence.pk %}' :
'{% url 'quality:list' competence.pk %}'
});
</script>
This small snipped can be placed anywhere in a Django template file.