I'm referencing this, in case the joke was lost

and "click to expand" should always be a

<button>

with

aria-controls

> I'm referencing this, in case the joke was lost it wasn't, but some people go way too hard and replace all their links with spans

it's important to learn html before htmx https://html.spec.whatwg.org/multipage/#toc-semantics

i think everyone should skim "The elements of HTML"

you don't need to read the algorithms, just the descriptions and examples of the semantics

It's so easy to build your whole site with HTMX

Running into some shortcomings now :/

anyone who had trouble submitting an htmx form with JS: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit

hx-boost should do the right thing

Is the hx-vals attribute not supposed to work with a form?

When I submit my form I don't get the action key value in my POST payload 😦

<form action="{% url "admin_edit_project_users" project.id active_member.user_proxy.id %}" method="post" hx-vals='{"action": "userrole"}' hx-target="userrole_{{active_member.user_proxy.id}}" hx-swap="outerHTML" hx-prompt="You sure?" >

hmm, that should work

can you place it on a parent element of the form and see if that works? I don't know why forms would be special in this regard

wait, you have an action on there, I don't see a

hx-post

or what have you

looking at the code, hx-vals should work fine w/ forms

the form will do a post so don't think I need to specify that, but I could give it a try to see if that's the cause

Yea no, the hx-post on form does not trigger when I submit it

<form hx-post="{% url "admin_edit_project_users" project.id active_member.user_proxy.id %}" hx-vals='{"action": "userrole"}' hx-target="userrole_{{active_member.user_proxy.id}}" hx-swap="outerHTML" hx-prompt > {% csrf_token %} <select class="form-control form-control-sm userroles" name='role_user_{{active_member.user_proxy.id}}' {%if active_member.user_proxy.user == user%} disabled='disabled' {%endif%} onchange="this.form.submit()" >

It should be triggered when the select changes value

Another issue that I have is, is it possible to specify in the hx-include, to include only the closest element that is found with a specific name?

Ah ok, that won't quite work as is. You can tackle it a few different ways. If the only submitting element in your form is the select, then you could add an hx-trigger attribute on the form:

hx-trigger="change from:.userroles"

(I would typically give the select an id and use that in the

from:#elementId

part instead) or you could put the hx-post, hx-target, etc attributes on the select element directly, along with

hx-trigger="change"

or you could use a bit of Javascript (I personally would use hyperscript for this), to trigger an event on change from the select on the form, and then still add a

hx-trigger="<eventname>"

on the form

I ended up doing the second approach as it seems the cleanest having one element and less complexity but it's good to know that I can have such flexibility on the triggering of events

In the first example can you direct me to the reference page that talks about this "from:. " specification?

@User It's described on this page: https://htmx.org/attributes/hx-trigger/ in the Standard Event Modifiers section

How can I refer to a child div inside the hyperscript containing parent. I want to keep it generic because the child form will have different id's depending on the context. Its 2 levels deep. Shouldn't this work?:

if my customform@dirty is 'true'