Giving me flashbacks

Hello everybody. I am just learning HTMX with the docs and trying out the example of input with hx-trigger="keyup changed delay:500ms". That worked. But now I want to change the example to only fire the event if the Enter key is pressed. Tried it like this: hx-trigger="keyup[Enter]" but that doesn't work. Can somebody help?

trigger filters work by resolving against the event: https://htmx.org/docs/#trigger-filters in this case you probably want the

key

property: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key something like:

hx-trigger="keyup[key=='Enter']"

Okay, thank you. I will give it a try. The layout in the docs looks definetly different: https://htmx.org/attributes/hx-trigger/

It works. Thank you!

ctrlKey

and

shiftKey

are properties on the keyup event

as is

key

And if I put the input-field in a form, can HTMX prevent the default on submit to reload the page?

no, it won't consume enter keys, you'll need to script that

@User @User re the IE11 topic, in 2018-2019 built a web app that clients/customers could use to place orders from a hospitality company. In mid 2019 onboarded a new client, 40-story office building in Manhattan NYC's financial district. About 70 tenants, 7,000 employees, during onboarding discovered about 15% of firms were using IE9 (law firms, architectural firms, etc)... which our app's various JS libraries didn't support 😅

I think it is dangerous to use outdated browsers. I won't do extra work for old browsers in my spare time.

for fun, here's what it'd look like in hyperscript (untested):

html
<form _="on keydown halt" ...>
  ...
</form>

the downside to that is that it doesn't allow any keydown events to escape the form, but that's probably OK unless you have global shortcuts

Thanks @User I'm not personally giving up on this but I'm going to have to set up a sandbox to have a play. Your diagram has made the way ahead completely clear. My thanks again.

🙂 I wanted to learn a new tool, but hopefully it at least helps people understand what I was saying

Is there any possibility to disable the "auto-configuration"/inheritance for an element's children?

html
<td hx-patch="/xapi/approve/18/" 
    hx-include="#counters-12, #formset-management" 
    _="on htmx:configRequest 
       get detail.triggeringEvent.target.getAttribute('data-action')
       then set detail.path to `${detail.path}?id=0&action=${it}`">
  <!-- tried this: div hx-disable-->
    <span class="fas fa-check" data-action="approve"></span>
    <span class="fas fa-times" data-action="reject"></span>
  <!--/div-->
</td>

what do you want to disable here?

we have a new attribute,

hx-disinherit

coming soon 🙂

the overall processing of the

td

content. i know it might not make sense given just this context, but i thought with hx-disable i could turn it off all inherited processing

Another tool that's worth checking out (if you haven't already) is https://whimsical.com/. I'm quite like the wireframing function in it.

Hi! I've recently started to use htmx. What I have basically is:

<div>
  <ul>
    <li><a hx-get="{% url 'products' %}" hx-target="#list" hx-swap="outerHTML">Products</a></li>
    <li><a hx-get="{% url 'prices' %}" hx-target="#list" hx-swap="outerHTML">Prices</a></li>
  </ul>
 </div>
 <div>
  <div id="list"></div>
 </div>

I'd like to update

#list

only if the content of the request has changed to avoid replacing the div content everytime I click on the same link. If I use

hx-trigger="changed"

nothing will happen as the value of the element itself won't have changed. How can I achieve this? I tried a couple of other things digging into the hx-trigger documentation, but none of them worked. Thanks for the awesome work!

it sounds like you want a javascript global, say

listNeedsRefresh

that is managed by however your state changes. You can then filter on this:

html
  <a ... hx-trigger="click[listNeedsRefresh]" ...>...</a>

Hi ! Hope you’re doing well. I can’t make Hx-confirm=« unset » work. Instead of cancelling the inheritance, it’s displaying an « unset » dialog 😂😂 Any idea ?

can you post your html?

i’m on mobile but basically it’s a form element that has the HX-confirm, then a link inside the form that does something else. I don’t want this link to inherite the confirm dialog

well it’s not a link it’s a button with another Hx-post

here it is

hmm, that should work

are you using the latest version of htmx?

thank you, that was it. Was on the previous version