Thanks. I have a form that POSTs to my API and a JSON response is returned with

HX-Trigger: spot_successful

in the headers. I've confirmed in the dev tools that the header is present in the POST response ( although it's lowercase,

hx-trigger

). In the HTML itself, I have tried both

document.body.addEventListener

and

htmx.on

and neither seem to trigger. Example :

htmx.on("spot_successful", function (event) {
        alert("SUCCESS");
        toast.classList.remove("hidden");
        setTimeout(function () {
            toast.classList.add("hidden");
        }, 3000);
    });

I'm just trying to have a toast appear and go away again.

how is the form POST-ing, via htmx?

No, I've had to make some changes to the payload so I'm calling

xhr.send

on a

XMLHttpRequest

Is that the piece I'm missing ?

ah, yeah

htmx has the logic that handles the response header, so you'll need to do so yourself

if you are issuing the request w/ your own code

Ah, okay, so that explains it. I think I saw somewhere some htmx syntax to, say, modify the payload before sending -- could I use that and have htmx still issue the POST ?

Alternatively, how might I "do it myself" if I want to stay with my own XML request ? Perhaps a dumb question, but this is my first foray into anything frontend so any pointers much appreciated 🙂

Yes, you can hook in to the

htmx:configRequest

event and modify parameters, headers, etc: https://htmx.org/events/#htmx:configRequest

That was the one ! Thanks

Looks like I could rewrite

detail.parameters

to the payload I want perhaps

☝️ top-tier advice here!

This uses Bootstrap's modals - https://github.com/bit-badger/myPrayerJournal/blob/main/src/MyPrayerJournal/Views/Journal.fs - it's F#, but hopefully a few pointers will help. Line 30 is where I have the button that triggers the modal, and its

hx-target

(

_hxTarget

) is a modal area. The code line 30 is a part of is rendered multiple times per page, but the modal target area is rendered once per page, starting in line 98; the actual

#snoozeBody

target is on line 109, and ends up being rendered initially as an empty

div

. The content of that body is filled in line 172 and following, based on the URL fired off by the button click. For closing it once processing is complete, I return a header from the server, then fire off the

click

event of the close button when that header. That's in https://github.com/bit-badger/myPrayerJournal/blob/main/src/MyPrayerJournal/wwwroot/script/mpj.js - the handler starts on line 85, and the part that responds to the header is lines 91-94. Hope that helps; if not, let us know what questions you might have about it.

@late-king-98305 Thanks! I'll take a look at the modal... it will probably do the trick.

If it's unclear what I meant, I can try to rephrase in a hopefully more meaningful way. 🙂

Some table weirdness: I have some `hx-get`s in my table header that target the table. These work as expected. I then have an

hx-delete

in the actual table itself. These have the same target but the response gets added to the table content unless I specify an

hx-swap='innerHTML'

.

Seems odd. If I leave out the

hx-swap

then I also get an error in the console ignore that. I think that's the SSE connection having a blip

Hi! We use boost quite a lot, but I'm wondering on how to deal with JS that creates objects when certain elements are on a page. Ideally I would like to clean up when navigating away. Is there any "best practices" for this kind of stuff?

The virgin "dynamically loaded js components so your application can be O(1)!" vs The Chad "just use hypermedia lol"

return to framesets

🪟

I'm using hx-push-url with some pagination on an index page. When click on that pagination it swaps out the current list with a new list. When I click on one of the item I go to the detail page. However when clicking on the back button it will only load the partial template. Is there some header to know if user clicked back button?

do you push url when the user clicks on a page?

yes

and again when the user clicks on an item?

hx-push-url should push a snapshot of the entire DOM to localstorage. if you push the page URL and the item URL, it should restore the whole page

from the docs:

The hx-push-url attribute allows you to push a URL into the browser location history. This creates a new history entry, allowing navigation with the browser’s back and forward buttons. htmx snapshots the current DOM and saves it into its history cache, and restores from this cache on navigation.

by default the body tag is saved in localstorage. you can override that with

hx-history-elt