if oob is working it is probably the more conservative answer

honestly for right now, I'd probably be fine with swap oob-ing the content - I'm trying to write some big-ish features in htmx for work and would rather get everything done first and then maybe come back here

that sounds like the right path then

I think I have in my head what needs to be done, I will try to work in the right cut-points in idiomorph at some point

the callbacks should be able to cancel parts of a morph anyway

we have all that stuff for the head morphing, just need to also implement it in body morphing

much appreciated, yeah this is definitely the hardest part of getting things working correctly with bloated js components. if this is possible anything is 😄

and definitely willing to contribute back once I get these pages done

I'm trying to extend the [Active Search](https://htmx.org/examples/active-search/) example which usually looks like this:

html
<input class="form-control" type="search" 
       name="search" placeholder="Begin Typing To Search Users..." 
       hx-post="/search" 
       hx-trigger="keyup changed delay:500ms, search" 
       hx-target="#search-results" 
       hx-indicator=".htmx-indicator">

I want to include more values in the search and @stocky-dentist-80693 helped me yesterday and said that one idea was to wrap this input field in a form. This works well when I click the button, i.e. it includes both the value from search input field as well as the value from the button:

html
<form id="search-form"
      hx-post="/search"
      hx-target="#search-form"
      hx-swap="outerHTML"
      hx-trigger="keyup changed delay:500ms from:#search-input, search from:input, submit"
      hx-indicator=".htmx-indicator"
      hx-include="#search-form">
      <input class="form-control" type="search" 
       name="search" placeholder="Begin Typing To Search Users...">
      <button type="submit" name="something" value="hello">Hello</button>
</form>

However, I've now lost the functionality from the search input field, i.e. the form is not submitted on

keyup changed delay:500ms

when I place this trigger in the

form

instead of the

input

element. I've thus tried to add the

from:#search-input

event modifier, but this doesn't seem to work for multiple events. If I change

hx-trigger

to to

hx-trigger="keyup from:#search-input, search from:input, submit"

, then the form is posted, but I loose denouncing etc. How can I make this work?

I have a login form and when a user successfully logs in I return

HX-Location

header that has path

/dashboard

.Then the user hits the browser back btn and gets an empty login form again. At this point, I'd like to redirect him to

/dashboard

again because he has a valid session. The session data are stored in a cookie. I couldn't find any good example on what is

htmx

approach to handle that kind of situation. Any hints?

this seems to be the same issue I had where the

changed

modifier on the

keyup changed delay:500ms from:#search-input

trigger checks the value of the element the trigger is defined on, not the target. so it'll get the change event from the input, check the form's value (which doesn't exist) and say it didn't change. If you get rid of

changed

i think it should work

on the server side for the login page, detect if they are logged in and issue a redirect

also, mark the login form as not cached locally by htmx by adding a

hx-history='false'

to it (thank you @hundreds-cartoon-20446 !)

If I set hx-trigger, does htmx stop listening for the element-default event?

If not, can I make it so?

htmx will prevent default for form submission and boosted link clicks

other events you will need to capture w/ scripting and call

preventDefault()

explicitly

wow major plot twist

I mean if I have

<button hx-get="/data">OK</button>

And change it to

<button hx-get="/data" hx-trigger="myCustomEvent from:body">OK</button>

So that it also fires when some custom event is fired, will it still trigger the GET on click or do I have to add it beside the custom event name

ah, yes, you want

hx-trigger="click, myCustomEvent from:body"

Is there a way to do pre-fetching with HTMX? EG: GET /index on mouseover then hx-replace="click"?

what's htmx doing about the balloon flying over montana? how is it handling it any better than svelte or react?

how many lines exactly?

when using the

htmx:confirm

event on a post request, is there a way to extract the

hx-vals

in the callback? I want to change the confirmation dialog based on what's being posted

even more important question... how do i add more values into the post request from the

htmx:confirm

callback? I've got inputs in my Sweetalert and i want to attach those input values into the request

In the context of an OOB swap, should the

beforebegin

,

afterbegin

,

beforeend

and

afterend

values for the

hx-swap-oob

attribute also result in an inline swap, as is currently the case for the

true

and

outerHTML

values? For example, given this HTML page:

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTMX Test</title>
    <script src="/src/htmx.js"></script>
    <script>
      htmx.config.useTemplateFragments = true;
    </script>
  </head>
  <body>
    <div
      id="test"
      hx-get="/htmx-test2.html"
      hx-trigger="load delay:1s"
      hx-swap="outerHTML"
    >
      <p>Test BEFORE swap</p>
    </div>
    <hr />
    <h2>Contacts</h2>
    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="contacts-table">
        <tr>
          <td>Cell 1a</td>
          <td>Cell 1b</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

If the content of

/htmx-test2.html

is:

html
<tr hx-swap-oob="afterbegin:#contacts-table">
  <td>Joe Smith</td>
  <td>joe@smith.com</td>
</tr>

<div id="test">
  <p>Test AFTER swap</p>
</div>

The

<tbody>

section of the initial page will be modified as follows:

html
<tbody id="contacts-table">
  <td>Joe Smith</td>
  <td>joe@smith.com</td>
  <tr>
    <td>Cell 1a</td>
    <td>Cell 1b</td>
  </tr>
</tbody>

See how the

<tr>

tag is removed. (cont.)

However, if line 696 of

htmx.js

in master is modified from:

javascript
return swapStyle === "outerHTML";

to:

javascript
switch (swapStyle) {
    case "outerHTML":
    case "beforebegin":
    case "afterbegin":
    case "beforeend":
    case "afterend":
        return true;
    default:
        return false;
}

The swap occurs as I expect it to:

html
<tbody id="contacts-table">
  <tr hx-swap-oob="afterbegin:#contacts-table">
    <td>Joe Smith</td>
    <td>joe@smith.com</td>
  </tr>
  <tr>
    <td>Cell 1a</td>
    <td>Cell 1b</td>
  </tr>
</tbody>

Why does htmx use

localStorage

instead of

sessionStorage

for stuff like history?