I got it to work with some hyperscript logic, but I don't like it. Will fall back to the full page/tree reload

Please up-vote the question and answer, if you liked it. This way I know that I am not alone 🙂

hx-swap-oob

has an issue. It can't handle a mixture of

<tr>

and

<div>

tags. The root cause is

parseFromString()

of the browser. For me this is really a blocker for my project. I created some ideas how this could be handled in the future. Please have a look at the proposed solutions and provide feedback. If you have an idea how to solve this, please speak up. Thank you: https://github.com/bigskysoftware/htmx/issues/469

Not sure if it helps, but can you put the oob div within the response's td tag? I think htmx is smart enough to pull it from there.

Oh, wow. I didn't even notice it was you asking the question 🤣 upvoted

Yeah, this is a hard issue with interior table related elements in general. They don't parse without a parent table tag, so you have to wrap them in a table, but then other elements won't parse inside a table. Hard problem. I would suggest piggybacking the update of other elements in an

HX-Trigger

header

I really hate how junky table parsing is :/

unrelated, but cool https://github.com/pemistahl/grex 👀

htmx should be able to connect up to DOM elements that are added after initial page load, right? eg, if I've got an infinitely scrolling search results page, and the results have an

hx-get

on them, they should still work, right?

yes

when htmx loads new content, it should initialize any hx attributes in that content

Ok, cool. That's what I thought, but I wanted to double-check

if you are loading content on the side, you may need to call

htmx.process

https://htmx.org/api/#process

Ah, bingo! That was it!

Thank you!

Has anyone used HTMX in concert with leaflet? For each point of interest (POI) on my map, I have a pop-up with some basic info that loads upon clicking the POI icon on the map. Rather than sending the data for all (hundreds) of POIs, I'd like to lazy load this content when the user does a mouseover of the pop-up (right now, just the title of the pop-up). But it never seems to fire. Here's the output of the pop-up itself. Seems pretty basic. If they mouseover the title, it should get /mouse_entered, but nothing happens. HTMX is loaded and working elsewhere in the page.

<div class="leaflet-popup  leaflet-zoom-animated" style="opacity: 1; transform: translate3d(478px, 284px, 0px); bottom: -7px; left: -118px;"><div class="leaflet-popup-content-wrapper"><div class="leaflet-popup-content" style="width: 196px;">
    <div hx-get="/mouse_entered" hx-trigger="mouseenter" hx-target="#data-div" hx-swap="outerHTML">
        Bench 16 ft parshall flume (Turnout)
    </div>
    <div id="data-div"></div>
    <a href="/assets/waterways/field/update/undefined" title="Edit this Control Point" class="pl-3">
        <i class="fal fa-edit text-warning"></i>
    </a>
    <a data-id="/assets/waterways/field/delete/undefined/" title="Delete this Control Point" class="delete-item pl-1 pr-2">
        <i class="fal fa-minus-circle text-warning"></i>
    </a>
</div></div><div class="leaflet-popup-tip-container"><div class="leaflet-popup-tip"></div></div><a class="leaflet-popup-close-button" href="#close">×</a></div>

Any recommendation for moving forward with this?

@User did you try the

htmx.process

mentioned above for my question? It sounds like you might be having a similar issue to mine, maybe

Nope. Didn't catch the conversation. Checking now.

You can probably test it by loading your page and calling

htmx.process(document.body)

in your console, assuming

htmx

is defined as a global

Haha, what are the chances we'd have similar issues at the same time. Good info. I'll give it a try right now.

lol yeah

Using htmx with leaflet is a cool idea. I've used leaflet in the past and this definitely seems like a good addition to it

Yeah, I've gotten to the point where I am sending a LOT of data to my maps, and it's unwieldy. Lazy loading the details for each point would give me a huge boost in overall speed, so I hope I can make it work.

Parsing works fine if it is inside a . Why not go this way?

that's an interesting idea!

maybe we should wrap the whole thing in a template I wasn't aware of that...

btw, I am finishing up my semester this week, and next week is an htmx week for me, so I'm hoping to put a lot of time into a 1.4 release.

Ended up being easy. Thanks for pointing out htmx.process()

function layerOnClick() {
    htmx.process(document.body);
}

And then add a click call on each layer before adding it to the map.

layer.on('click', layerOnClick);

awesome!

And doing hx-get on load, instead of mouseover