All my editors have an id with

id="editor-xxxx"

set and I did:

js
hx-trigger="every 30s [!document.querySelectorAll(`[id^='edit']`).length"

works like a charm 🙂

Great!

might be worth extracting that out to a method to clarify:

html
<script>
  function whenNotEditing() {
    return !document.querySelectorAll(`[id^='edit']`).length
  }
</script>
...
<table ... 
       hx-trigger="every 30s [whenNotEditing()]"

you are obviously right!

maybe a method like

hx-StopParentTrigger

would be a neat addition in htmx2.0?

yes, that sounds reasonable

Absolutely loving HTMX and Hyperscript, such a breath of fresh air compared to the SPA frameworks I've worked in previously. Most of the pages are easily adaptable to the server-side rendered way of working but I was wondering how some of you would implement a page on which you show Google Maps with a number of assets as a marker on the map. The side content (next to the map) would list the assets and their "last seen" datetime property for instance. Updating the side content is easy with the "every 10s" trigger, but how would you update the position of the marker? A full page refresh does actually seem overkill here as the map initialization is a heavy process (certainly for mobile devices). One possible solution I thought of is to send the JSON serialized version of the assets (as you would do in an API-based approach) as a header, and then retrieve that and invoke a regular javascript function to update the markers, but it feels quite dirty. Interested to hear how other people would approach this.

what sort of user interaction updates the map? Dragging it?

no interaction, let's say the assets send a periodic ping to the server, which updates their latitude/longitude coordinates

Ah, got it.

So, in that case, I might use a poll on the side content and an associated HX-Trigger response header (w/ a JSON payload) to update the markers

keep it all in one server request that way

right, but the side content is HTML and would be updated as well (to show the last updated datetime for instance)

so you'd have one poll for the HTML content and have it add a trigger and then have a request which is JSON, to update the markers

yes

You could do them both in a single request

the poll gets the new side content and replaces it, and then that response also includes an

HX-Trigger

response header, that triggers an event (e.g.

updateMarkers

) and includes the JSON payload needed to do so

am I making any sense?

but doesn't the HX-Trigger header only contain the name of the event to be triggered, where does the JSON payload come from?

You can include payloads in it

oh ok, didn't know that

neat, that looks like a clean solution

not awful, anyway

thanks for the help!

In the past, I've done a similar thing by having JSON-encoded coords in

data-marker

attributes on the HTML items, and then have a JS function that parses the items for their

data-marker

attributes and update the map accordingly. The JS function is called both on page load/maps init as well as for htmx responses.

@stocky-dentist-80693 , not a bad idea either!

might even be necessary, as the data that can be contained in an HTTP header is probably limited (I'm reading something like 8KB max for some web servers), embedding it as data-* attributes in the HTML wouldn't have this kind of limitation