hyperleaflet
hyperleaflet copied to clipboard
Undefined event.detail on slow requests
I'm facing an issue while making multiple calls to an endpoint triggered by map:moveend
events using HTMX.
If I move the map around quickly multiple times and the triggered endpoint takes a long time to return a response, the event.detail
object becomes undefined
. If the endpoint returns quickly enough, or I don't move the map too often, then it works fine without any errors.
To clarify, this endpoint returns elements that have the data-id
attribute. Basically it returns all objects from the database within the current bounding box.
Here is my code:
<div
id="map"
data-center="<some coordinates>"
data-zoom="13"
data-reverse-order-all
hx-get="/some_endpoint"
hx-target="#some_element"
hx-swap="outerHTML"
hx-trigger="map:moveend from:window"
hx-vals="js:{bounding_box: event.detail.bboxString}"
></div>
And here is the resulting error:
TypeError: Cannot read properties of undefined (reading 'bboxString')
at eval (eval at <anonymous> (htmx.min.js:1:35058), <anonymous>:3:37)
at htmx.min.js:1:35084
at wr (htmx.min.js:1:35243)
at br (htmx.min.js:1:35035)
at Er (htmx.min.js:1:35366)
at Cr (htmx.min.js:1:35421)
at he (htmx.min.js:1:38764)
at htmx.min.js:1:38177
at w (htmx.min.js:1:38387)
at b.onload (htmx.min.js:1:40295)