gosh DARN it

it won't find stuff inside a template

😠

OKOK

OK

have I ever mentioned how much I hate table parsing in HTML?

🙂 I think using the

<template>

tag is something I tried yesterday as I was trying to understand and debug the behavior in

htmx.js

. Not really knowing Javascript and not being familiar with the DOM and everything around it didn't help me much. 😄 But it's OK, my local modifications to the

inlineSwap

function seem to work just fine for my use case and haven't broken anything I use so far that I can see, so if they're not appropriate changes for the main repo, I don't mind using my modified

htmx.js

copy for my website until HTMX 2 comes along.

Hi - I'm just starting testing htmx. I'd like to pull json from a REST interface and display in a template via client-side-templates.js. I see how it's supposed to work in https://jsbin.com/qonutovico/edit?html,output. The json from the sample looks like:

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

And mine looks like:

[{"@row.id":426,"Holiday Text":"National Foundation Day"}]

The difference is the [] around mine, I think, and referencing

{{Holiday Text}}

is not working. Is there a strategy for handling json like what I have, perhaps a kind of "jq" filter?

Which template engine do you use?

I think mustache does not support root arrays, but they should work in Handlebars and maybe nunjucks

Oh, it does work. Well then, just wrap your template with

{{#.}} ... {{/.}}

and you should be good to go

oh, thank you!

I'm trying to find a way to swap in content via hx-swap-oob beforeend, but only if it wasn't previously swapped in, based on a simple match of tag+class amongst children of the target. I was hoping to create an extension to add to the hx-swap-oob element (eg: hx-ext="dedupe"), but I'm finding that none of the extension fns are called on the hx-swap-oob, is this to be expected? Any other suggestions on how to approach this?

Hi everyone! 🖐️ I've been working on a new HTMX extension for Leaflet.js, an interactive mapping library. I'm happy to announce that the very early version is now available on GitHub. https://github.com/cemrehancavdar/hyperleaflet With Hyperleaflet, you can easily display points on a map using HTML data attributes and manage tiles and other map properties such as zoom and center. I've also prototyped some extra features using _hyperscript for improved map interactivity, will implement soon. There's a simple Flask sample in the repository that you can try out. I have a question for the community: currently, I check for changes in the table using 'htmx:afterProcessNode' and 'htmx:afterOnLoad' and look for elements with a 'data-id' attribute to identify them as Leaflet objects. I then keep checking for changes and diff old and new 'data-id's. Is there a better way to do this? Or should there be better integration between HTMX and interactive libraries like Leaflet? I would love to hear any recommendations for this extension's codebase. @mysterious-toddler-20573

Hi @gray-dinner-25100 !, very cool!

I will need to take a deeper look at the code at some point, but my only comment is that, in general, I think integrations between rich content like the map and DOM content should be done through events

but that's a very high level thing to say

I'm pretty sure the balloon uses JSON over the wire...

Is there a way to use hx-put to upload a file to S3? Specifically, in alpineJS on an input with type="file", I am currently doing:

fetch(presignedPutURL, { method: 'PUT', body: e.target.files[0]});

I tried following the example docs for file uploads (https://htmx.org/examples/file-upload/), with and without hx-encoding, but no dice (also the example uses hx-post).

Is it possible to use HTMX with DropzoneJS?

Yep https://github.com/dropzone/dropzone/pull/1925

I wish Dropzone would update their dismal documentation with things like this.

S3 supports

multipart/form-data

uploading protocol, so I would consider looking at that first https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html. It's a bit more complicated, compared to simple PUT, but it should work with htmx without jumping through the hoops. As for using PUT with htmx, you most likely would have to modify request body with JS by listening to htmx:configRequest and similar events, since htmx always uses either x-www-form-urlencoded or multipart/formdata (or JSON, if you use an extension) \_hyperscript on the other hand would do this very easily

_='on submit 
halt the event 
fetch presignedUrl with method:"PUT", body:#file-0.files[0]'

What web template system are you using to generate HTMX? I'm looking for one that is platform ignorent (can be used by whatever server language we'll choose) and supports static analysis (to enforce corretness of the output).

What is this tool?

So I'm trying to render a "root" htmx element via Elm and htmx doesn't seem to want to hook into the element that Elm is rendering 🤔

Any thoughts?

https://htmx.org/api/#process https://htmx.org/docs/#3rd-party > If javascript adds content to the DOM that has htmx attributes on it, you need to make sure that this content is initialized with the htmx.process() function.