htmx & hyperscript

HTMX

hx-include

include field values in request

<input type="text" id="username" placeholder="Enter your name"><select id="language"> <option value="English">English</option> <option value="Spanish">Spanish</option> </select><button hx-post="/submit-data" hx-trigger="click" hx-include="#username, #language">Submit</button>

hx-trigger

trigger GET request, on change of Select option

<select id="options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select>
<div hx-get="/get-content" hx-trigger="change from:#options" hx-include="#options" hx-target="#content"></div><div id="content"></div>

trigger values

click

hx-vals

add JSON value to request

or

hx-vals='{"somekey": "somevalue"}'

passing a Jinja variable to the API backend

update multiple elements with a single backend request

index.html

<div id="test1">Joe</div><div>some long content here</div><button hx-get="/backend" hx-swap="innerHTML" hx-select-oob="#test1">Update</button>

backend.py

return HttpResponse("""
<div id='test1'>FRED</div>
<button id='btn'
hx-get='/backend'
hx-swap='innerHTML'
hx-select-oob='#test1'
hx-target='#btn'>UPDATED!</button>""")

will render test1 to Fred, and update text of button

to render more than 2 swaps via 1 API call, use extension

https://github.com/bigskysoftware/htmx-extensions/blob/main/src/multi-swap/README.md

Hyperscript

CSS Properties

change CSS property

or via human-language

<button _="on click set #row_1's *background-color to 'red'"> Set It's Background To Red</button>
<div id="row_1"> The Div</div>

multiple ON events

<input class="form-check-input" name="checkbox" type="checkbox" id="mycheckbox" {% if checkbox %}checked{% endif %} _="on load or click if my.checked is true show #someField else hide #someField
"> Check this box?

get HTML element by custom attribute and do stuff to element with same ID number (get ID based on form, update TR with same row_ID

Arrays

get all checkbox elements that are checked on, skip anything with ID="select_all_chk" and append all selected "conn_id" attributes to an array

example data

<input id="row_{{row.id}}" conn_id={{row.id}}>
<input id="row_{{row.id}}" conn_id={{row.id}}>
<input id="row_{{row.id}}" conn_id={{row.id}}>

<button_="

set myList to []
for box in <input[type='checkbox']:checked/> as Array
if box.id is not 'select_all_chk'
append box.getAttribute('conn_id') to myList
end
end
"
>

API call

get list of all Conn_IDs, for each ID, make a POST request to backend 'delete' route

<button id="btn_delete_all" class="btn btn-danger" _=" on input from #dataform if <#dataform input:checked/> is empty hide me else show me end end
on click set id_array to [] for box in <input[type='checkbox']:checked/> as Array if box.id is not 'select_all_chk' set conn_id to box.getAttribute('connid') set url to '/conn/delete/'+conn_id fetch url with method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' }, body: JSON.stringify(payload) end end end "