how to change the hx-get url when custom event is triggered?

[niceperl]

I have an element declaration like this:

<div id="target" hx-get="/my-url/show" hx-trigger="my_event from:body" ... >
...
</div>

When "my_event" is triggered, I'd like to change the "hx-get" url with the custom event details. For example, if the event has "id=100" info, then the url should be ""/my-url/show/100".

Any suggestion? Thanks in advance!

[formoxyz]

You can use javascript/hyperscript to change attribute on the div on a custom event. So you can update the "hx-get" attribute on the custom event.

Or
If you have control over the server side code you can do this-
Instead of the div you can have a form. Have a hidden field on the form.
On custom event change the value of the hidden field and submit the form.

Or

[dfrommi]

I'm facing the same scenario and am very surprised that this is not supported out of the box. I feel it's a major gap in custom event handling of HTMX.
My use-case is to update certain areas of the page after an item was selected in a table. To make it modular, I don't want a central place that knows what needs to be updated.

But thanks @formoxyz for your explanation of workarounds. I tried following the hyperscript-approach, but am not able to get it working.
My hyperscript-code is

on itemSelected from <body/> set @hx-get to `/items/form/${event.detail.id}` then log @hx-get

The log shows the updated hx-get value, but the request to the backend still uses the old value of hx-get.
Also wondering what would be the best hx-trigger to use here? My custom-event is probably not the right one, as I might not yet have done the modification of hx-get before HTMX triggers.
To make sure that this is not the issue, I triggered another custom event from my hyperscript code and used this as a hx-trigger, but still not working.

Do you have a minimal example showing the workflow? Thanks a lot!

[dfrommi]

Update:
A plain Hyperscript solution is working, as long as it is outside of the target element (outerHTML is not working for me)

on itemSelected from <body/> fetch `/items/form/${event.detail.id}` put the result into my innerHTML

Plain HTMX would be much preferred, but at least it's working somehow.

[dfrommi]

Got it working

<div id="item-form-container" 
  _="on itemSelected from <body/> set @hx-get to `/items/form/${event.detail.id}` then call htmx.process(me) then trigger reloadItemContainer" 
  hx-trigger="reloadItemContainer" 
  hx-get="/items/form"
></div>

The key parts are

• call htmx.process(me) after changing hx-get
• use a new custom event to let htmx know that the hx-get update is done, otherwise it will trigger with the old url.

If there's an easier way, please let me know. Because that's quite a lot just to use the data of custom events.

I wonder if an extension could add support for something like hx-get="/items/form/{event.detail.id}"

[BeMoreDog]

Over a year on, I can't find a better way but this worked for me - thanks.

[dfrommi]

Turns out it can be an extension, and it makes things very easy... #1260

[kontur]

You can intercept the event and change the path before it is sent:

<button hx-get="/foo/bar/" hx-on::config-request="event.detail.path+='100'">Foobar 100!</button>

Will call /foo/bar/100 instead of just /foo/bar/.