I only have one specific condition in my rendering and it is: if request arrives with hx-boosted, don’t return the full html but only the content of the body

I develop a small app to manage events (something along the lines of https://doodle.com/en/, but a little simpler). An organizer can contribute new upcoming events, and a predefined list of "guests" will have to browse the event to decide if they want to attend or not. I have a landing page/splash screen on the app that lists all guests existing in the application (they cannot register themselves to the app, they are added upfront by admins). And when the user browses the app for the first time, he is presented with this list of guests and should choose "who he is". This helps then to present information related to his profile in the rest of the app. Anyway, the landing looks something like this (and lays at

/whoami

):

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body hx-boost="true">
<p>{{ "Who are you?" | translate }}</p>
  <ul>
    {{ range .Guests }}
      <li><a hx-post="/whoami/{{ .ID }}">{{ .Name }}</a></li>
    {{ end }}
  </ul>
</body>
</html>

And so the user should click one of the guests in the list, which triggers a POST request. On the server, I handle this POST request by just adding a cookie/session to register the user, and then I want to redirect him to the homepage

/

to arrive on the list of upcoming events. But I would like this to happen without a full reload (see that I am using

hx-boost

on the body). On a click in the list of guests, and instead of redirecting the user to the homepage, I could render home and implement a swap of the response into the body with htmx. But first the URL would stay

/whoami

and that’s not ideal. And second, this means I need to call the rendering of the homepage from the "whoami" handler on the server, and I feel it would be simpler for me to just redirect the user, and let the homepage handler do the rest. Does the context make sense?

looking

OK, so

it doesn't look like there is anything conditional here

you are just setting the cookie and rendering the home page

so it seems like rather than a redirect, you can just render the home page from that URL and use the

HX-Push

header to push

/

into the nav bar: https://htmx.org/reference/#response_headers

also, I would note that the hx-boost isn't doing anything w/ that link because it doesn't have an

href

on it

i hope that makes sense

Thanks for taking the time to answer. This makes sense, and yes the

hx-boost

isn’t used in that scenario effectively. That’s because I also have a navbar with regular anchors which I haven’t included here. Maybe one more question, when I use the 302 on a htmx request (as you suggested before), where in the htmx.js code does htmx understands that it should reissue a request to the new Location before swapping?

htmx doesn't ever see the 302, it just sees the response

unfortunately redirects are hidden entirely from the xhr API, so all we see is the final response

:/

makes things a pain

Do you mean that is the browser itself that sends the new request?

yep

it gets a 302 response and then issues a new request itself

we never see it, we just see the response

Ok, i get it

would love it if we got more information, we could be a lot smarter

And wouldn’t it make sense in handleAjaxResponse to be a little smarter when dealing with

HX-Redirect

in response to a request that has been fired from an element which is in a

hx-boost

scope? Don’t know if you have access to the element from which the request has been fired at that moment, but maybe by checking that this element is inside a

hx-boost

parent, htmx could decide to reissue a boosted request to the location instead of simply

window.location.href

? Maybe it does not feel right in the design and it is a little too specific? (just trying to get a full picture of the limitations here ^^)

This is old and related to JQuery, but this answer explains that this is a universal frustration when it comes to xhr and redirects: https://stackoverflow.com/a/304654/392437

@User ☝️

I have also just tested a simple regular

hx-boost = "true"

scenario from my navbar. If i have something like :

<body hx-boost="true">
<nav>
  <div>
    <a href="/">home</a>
    <a href="/one">one</a>
    <a href="/two">two</a>
    <a href="/redir">redirect 302 to home</a>
  </div>
</nav>

<main>content of home</main>
</body>

When I browse the home, one or two, I have normal boosted requests (intercepted by htmx). When I click

/redir

(which behind the scenes only respond a

302 Location

to home), a new xhr request is fired (probably by the browser as you said), but it seems

HX-Boosted

is sent in that new request. How is that possible if this is handled by the browser and not by htmx directly?

really? The browser must be doing it

Maybe I don’t understand correctly, but see this gif I just recorded. After the 303, we see the initiator not being htmx anymore (so I guess it means it is the browser), but when I have a look at the request headers, I still have

HX-Boosted

.

CSS is treating me badly right now... I'm trying to get a

td

element to flash similar to https://htmx.org/examples/bulk-update/ using

.htmx-settling td.update_flash {
  background: darkseagreen;
}

td {
  transition: all 1.2s;
}

I'm inserting the

update_flash

class into the

class

which seems to work but there is no flash of green as expected

HTML looks like

<td class="" id="abc_this" nowrap="nowrap">
  <input hx-target="#abc_this" hx-swap="outerHTML swap:1s" 
         class="form-control form-control-sm" type="number" 
         name="nameabc" value="0.00" step="0.5" 
         hx-post="/projects/update" hx-trigger="change delay:0.1s">
</td>

Also, Turbo drive seems to correctly intercept 303 redirects after form submission without reloads as per the documentation 🤔 https://turbo.hotwired.dev/handbook/drive#redirecting-after-a-form-submission