The form contains filter inputs that are sent to the server wich updates the searchresults. So ideally both actions (submit button or radio changed) should cause the surrounding form to submit. The radiobuttons are kind of an enhancement, but the submit button should always work as a fallback. So if a form can have multiple triggers, that would be nice. Anyway, i will fiddle around with it some more tomorrow.

This is a fun episode, and htmx (and Carson @User) gets a small mention in the chatter at the end. https://devmode.fm/episodes/what-even-is-javascript

Is there a way to bind URL to changes to page state via htmx?

You can update the URL from the server side using the

HX-Push

header https://htmx.org/reference/#response_headers and you can also do it on the client side via

htmx-push-url

https://htmx.org/attributes/hx-push-url/

Ok but what if I have several areas which update different parts of the URL?

E.g. query string arguments

ideally they would each have a

hx-push-url

that updated the local URL appropriately or relied on the server to return the correct URL in an

HX-Push

header

For complex cases, I use the header. htmx always sends the current URL in the request headers so you can take that, change it, then send it back.

In my case I'm using micro-frontends so responsibility for query string components (and html rendering) isn't centralised in a single backend service. I guess I'll need to build some sort of aggregating proxy server which does this :/

Actually the model you suggested should also work for microfrrontends @most-jelly-15242

the joy of stateless state

@User I guess the alternative would be to update every part of the page that needs to be able to push changes to the URL, whenever an update is made elsewhere. This way all htmx rendered partials will always have the latest version of the current page URL and you can use

hx-push-url

. If that's an option you could try to manage it with events.

I think your original method you suggested can work well @most-jelly-15242

I'd like to feature your conversation on https://thisweek.htmx.org, is that fine by you?

Yup yup

If I get a working prototype I'll maybe showcase it

Scenario: I'm rendering a Bootstrap modal on page load, that can be used to edit any one of the cards that I'm also displaying. One of the things this does is provide a button to load previous notes related to the card. My thought was to have a link/button "Load Prior Notes", then let htmx boost that and replace it with the results. Each card has its own ID (database, not HTML), so I'm using a

data

attribute to hold that ID. Then, I use Bootstrap's example at https://getbootstrap.com/docs/5.0/components/modal/#varying-modal-content (the event handler) to set the

href

of the link, or the

hx-get

of the button, to call the right URL. It's also decorated with

hx-boost

. What I'm seeing is that, if it's a link, it navigates the browser there; it doesn't get boosted. If it's a button, I can make it work, but instead of loading the URL I set when the modal was shown, it loads a copy of the same page the modal is on. It's almost like the boosting may be being done when the page is initially rendered, but not picking up when I change the target URL. Does that sound like it makes sense? And, if so, I very well could be "doing it wrong," so feel free to suggest alternate approaches. (Maybe load the modal but have it get the guts from the server via

hx-load

? But I've still got to set the ID somewhere, or the update / note retrieval part won't know which of the cards it's being called against.)

FWIW - this is "doing it wrong". I put an

hx-get

on the button that launches the modal, targeting the body of the modal; then, I return the HTML fragment from the server. All the htmx stuff works like it should again. 🙂

Are there people here trying like me to avoid

npm

and frontend build steps as much as possible? If so, what CSS framework do you guys use (and do you use any)? I really like the design of tailwindcss, but it bothers me a lot that I need

npm

to take full advantage of it (apply the postcss configuration, use the "apply" directive to wrap components, and so on). I tend to like simple CDN imports nowadays. What is your strategy for this? Is there a utility-first CSS library that is in the wild without a js build/preprocessor? I don’t specifically hate preprocessors but at least I don’t like having a javascript pipeline to build my frontend assets. Maybe I "just" need to rewrite the tailwind preprocessor using my backend language 😆

tbh i think tailwind is so good its worth using even with a bit of pain

personally i avoid deps when not neded but if i do need them i use npm because this way i can use 'node-update-check' to keep tabs on new releases for the packages that i do use.

I'm using Django with htmx and I have a form with several controls that I want to trigger upon. I tried to target them individually by name, something along the lines of:

<div hx-post="...url..."
    hx-trigger="change target:input[name='one_thing']"
    hx-trigger="change target:input[name='another_thing']"
    hx-swap="outerHTML" hx-target="this">

but I couldn't get that to work, trying various variations including

"change target:input[name='a'], change target:input[name='b']"

and other variants. In the end I gave up and just used

hx-trigger="change target:input[type='checkbox']"

which worked because all the controls I needed to watch were checkboxes. That "overselected" because I have some checkboxes that don't need this, but that's survivable. Now my problem is that I have other controls that are not

type='checkbox'

so I'm back to my original problem: How can I use hx-trigger to target multiple form elements?

Could you add a new custom class to the checkboxes you are interested in, and use that in the

change

target ref?

I thought about that, but the actual HTML is coming from the Django widget templates, so I'd have to dig into that. And I considered wrapping the controls-of-interest in a div with a distinctive class name, but I haven't figured out how to target a control that is one or several layers inside my distinctive div...

If necessary I will look at overriding the Django widget (i.e. the HTML snippet Django makes for the actual control), but I was hoping for a simpler way using some expressive htmx syntax I haven't stumbled upon yet

Ah, OK! Fair enough 🙂 I've not used hx-trigger to that extent yet, so can't say why it isn't working as you've tried 😕

Hmm. I wonder if I can keep my hx-trigger as it was, and then nest another div just inside containing a different hx-trigger expression, but target the outer div, so that either trigger causes the outer div to be htmx-refreshed...

OK, so nesting two divs, one holding each hx-trigger, and the inner using hx-target to target replacement of the outer, seems to work. Something like:

<div id="htmx-container" hx-post="...url..."
    hx-trigger="change target:input[name='one_thing']"
    hx-swap="outerHTML" hx-target="this">
    <div hx-post="...url..."
        hx-trigger="change target:input[name='another_thing']"
        hx-swap="outerHTML" hx-target="#htmx-container">

Good enough to get by, but not as tidy as a multi-target syntax might me.

you probably want:

html
<div hx-post="...url..."
    hx-trigger="change[target.name=='one_thing' || target.name='another_thing']"
    hx-swap="outerHTML" hx-target="this">
   ...

symbols are resolved against the event first (so

target

becomes

event.target

) and then against the global namespace