Trigger hx-get from JS

[BoPeng]

I have a cart-count element that

<span id="cart-count" hx-get="/cart/count"
     hx-trigger="load delay:1s" hx-target="#cart-count" hx-swap="outerHTML">
</span>

will try to hx-get the number of items in cart when the page is loaded.

Now, I have an add-to-cart button that, after its own stuff (e.g. change itself to remove from cart), send

            response['HX-Trigger-After-Swap'] = "cart-updated"

to the frontend.

I have an event listener that works,

document.body.addEventListener("cart-updated",
    function (evt) {
        alert("cart updated")
    })

but how can I trigger hx-get of the #cart-count element in JS?

Actually, it would be very convenient if I can write $cart-count as

hx-trigger="load delay:1s, cart-updated"

so that no JS is needed.

Update: According to #187 , hx-trigger="cart-updated" would work if the cart stuff is in the parent chain of add-to-cart element, but unfortunately this is not the case for me so some manual way to trigger hx-get is still needed.

[1cg]

Would you mind asking this question on stack overflow and linking to it, so we can build up some answers over there?

That's where people tend to go for things like this, and I have a good answer for you. :)

[BoPeng]

Like this?

[1cg]

Perfect, I answered it there too, but here is what I said:

You can listen for the event on the body of the document in the latest version of htmx using the from: modifier like so:

<span hx-get="/cart/count"
      hx-trigger="load delay:1s, cart-updated from:body" 
      hx-swap="outerHTML">
</span>

Note also that you don't need to use an explicit target here since the default target is the element that the hx-get is defined on.

[BoPeng]

That is cool!

I was thinking along the line of

response['HX-Trigger-Targets'] = '#cart-count`

but this from:body solution is good enough.

[BoPeng]

Just to confirm that the solution works perfectly.