HTMX multiple event on one element - each event executing different request

Question

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

Answer 1

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.