Every input wrapped inside the will be included in the request - as long as the inputs each have a

name

attribute. If the filter inputs can't be inside the form for whatever reason, you can also add a

form

attribute to each filter input to link it to the tag by ID, which should still work. Alternatively, if you want more control over other htmx directives like target/swaps/etc, you can skip hx-boost, and use

hx-get

on the form along with

hx-push-url="true"

.

hx-trigger="load"

is not working on boosted links. Anyone have idea?

<!-- this is working, triggering GET /subpage after load-->
<div>
  <a hx-get="/subpage" hx-trigger="load">Sub Page</a>
</div>

<!-- this is not working, not triggering GET /subpage after load -->
<div hx-boost="true">
  <a href="/subpage" hx-trigger="load">Sub Page</a>
</div>

You could return a blank form on success. Another way is to use HX-Trigger response header to call a JavaScript function which has a form.reset() call.

hey, idk where to post this but

can someone add the htmx logo to simpleicons?

would be usefull to use on badges around projects and stuff

(imgshields uses simpleicons)

Hey all, In firefox when the browser sleeps a tab and I click it, it comes back as just the HTML fragment that loaded, not the entire page. A refresh fixes this, but is there any way to address this behavior? I thought perhaps it was the caching mechanism but after setting the vary header the behavior persists.

I was able to replicate this, not sure how we might work around it with htmx. Unrelated but I'm also seeing JS errors popping up on older sites where JS is reloading while using the JS so should already be loaded and best current guess is that it's related to tab unloading across chrome/firefox/safari also.

yes, see https://discord.com/channels/725789699527933952/725789747212976259/1104985302625419344

actually it's slightly more complex than i said there, to correctly distinguish htmx requests and handle caching correctly, i am checking both the

HX-Request

header and the

?hx=1

query param. otherwise a user might manually enter a URL with

?hx=1

param and hit Enter, but we don't want to render a partial for that because it's not an htmx request.

So when a tab comes back from unload/sleep does browser issue a new GET request to url without the ?hx=1 url is made to server? Or is it loading from cache the last version of page without param? I will try to test this afternoon.

it's requesting exactly what's in the URL bar

Godspeed

why not only check the header if (hasHeader('HX-Request) && haders['HX-Request'] === true) { // render partial } else { // render whole page }}

?

explained in the message i linked to

actually i think i just found a better way: https://github.com/bigskysoftware/htmx/issues/1229#issuecomment-1553572220

i'll try this later today [EDIT: just tried right now–couple lines changed. works perfectly]

How do you 'uninherit' or disable hx-include ? For example my parent element has an hx-include that I don't want to include on a child (

hx-include="false"

didn't work)

You were so close with “uninherit” 😄

Thanks! hx-dead-to-me, it is so obvious 😉

i ended up with something similar after all

ocaml
let htmx req =
  match Dream.header req "Accept" with
  | Some "text/html;hx=1" -> true
  | _ -> false

you will need a tiny bit of custom-written JavaScript:

javascript
  // On form submit, clear the form.
  document.addEventListener('htmx:afterOnLoad', evt => {
    const frm = evt.detail.elt;
    if (frm instanceof HTMLFormElement) {
      frm.reset();
    }
  });

  // If there's an error response, show it in the toast
  document.addEventListener('htmx:responseError', evt => {
    document.getElementById('toast').outerHTML =
      `<p id="toast" class="error">${evt.detail.xhr.responseText}</p>`;
  });

RE: Stack Overflow survey

If there is error only the Error message (Error Message get updated and Form Data remain same if there is success the I can return Blank Form

I know that you can Use HTMX to retrieve client data a in Flask server like this : index.html : Submit app.py : @app.route('/') def home(): return render_template('index.html') @app.route('/submit_form', methods=['POST']) def submit_form(): # Use the

request.form

object to get the form data. username = request.form.get('username') password = request.form.get('password') print(username,password) # Now you can use

username

and

password

in your logic... # Always return a response return "Form data received!" However There seems to be no possibility to retrieve username/password if I need the submit button to be outside the form. I can be done easily with vanilla javascript. NB: hx-vals="{json: getFormValues()}" did not solve the issue .* I am looking for a confirmation that it is not possible without javascript.*

I am returning 417 status but event is not firing I have added script tag when returning New Blank Form