Using multiple custom event as triggers in HTMX, can I identify which of the triggers is being used?

Question

I am using HTMX in my Django project to change elements in a form depending on previous selections. At some point I use a custom event and listen for it as indicated in solution 3 here: https://htmx.org/examples/update-other-content/

Everything works as expected, also when using two triggers separated by a comma.

However, I would like to pass a header, the value of which depends on the event being used as trigger. Trigger foo -> header A, trigger bar -> header B. Below is some code that should help understand.

<div hx-get="{% url 'someurl' %}" 
     hx-trigger="foo from:body, bar from:body" 
     hx-target="#sometarget"
     hx-swap="outerHTML"
     hx-headers='{"someheader":"foo_value"}' OR '{"someheader":"bar_value"}'>

So far, I have tried:

• putting target.value as header value (you can use it as trigger filter, so I thought it might work in hx-headers too)
• Passing headers or context variables in the view that causes the trigger to go off, so that then I can use Django's {% if %} in the template. But they don't get here because that view renders a different part of the template, and this is just being triggered because it listens for the event on the body due to event bubbling

Any suggestions?

Answer 1

HTMX provides the htmx:configRequest event, where we can inspect and alter the payload before HTMX dispatches the request. The triggering event is located in the evt.detail.triggeringEvent.type property, the header object is at evt.detail.headers. So we can add a custom header depending on the triggering event by including the following JS snippet on the specific page:

<script>
document.body.addEventListener('htmx:configRequest', (evt) => {
  if (evt.detail.triggeringEvent.type === 'foo') {
    evt.detail.headers['someheader'] = 'foo_value'
  }
  if (evt.detail.triggeringEvent.type === 'bar') {
    evt.detail.headers['someheader'] = 'bar_value'
  }
})
</script>