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> <!-- other options --></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> <!-- other options --></select>
<div hx-get="/get-content" hx-trigger="change from:#options" hx-include="#options"    hx-target="#content"></div><div id="content"></div>

trigger values




hx-vals

add JSON value to request

<div id="bq">Some Data</div><button type="button" class="btn btn-primary btn-sm" type="submit" value="Submit"
hx-post="{% url 'send_profile' userid=obj.user_id %}"
hx-vals="js:{appdata: document.getElementById('bq').innerHTML}">Send</button>

or 

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

passing a Jinja variable to the API backend

<button type="button" class="btn btn-info"   id="email_btn"   data-bs-toggle="modal" data-bs-target="#basemodal"   data-bs-title="Email Applicants"   data-bs-modalsize="modal-lg"   hx-get="{% url 'mm_email_applicants' %}"   hx-target="#modal-body-area"   hx-vals='{"search_data": "{{search_data}}"}'>
</button>

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

<div class="row" id="row_1">some row text</div><input type="checkbox" _="on click set row_1.style['background-color'] to 'red'"></input>

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 all IDs on button click


<div class="myClass" id="1"></div>
<div class="myClass" id="2"></div>

<button _="on click