Oob-swap and redirect combo #1935

adicco · 2023-10-31T12:45:38Z

adicco
Oct 31, 2023

Dear HTMX community,

Thank you for this great tool. I was recently trying to implement toast-style notifications. The way I did so was by having a main toast-container protected by hx-preserve, and piggy-backing the toasts as oob-swaps.

With the following base template:

<body hx-boost="true">
<div id="content"></div>
<div id="toast-container" class="fixed top-2 right-2 w-[200px] z-50" hx-preserve></div>
</body>

Then when sending say a PUT request to /items/:id I would return

<div hx-swap-oob="afterbegin:#toast-container">
  <MySuccessToast />
</div>
<div>{/* Whatever partial to return */}</div>

But there's also the common case of receiving a redirect from the server (HX-Location), which particularly makes sense when adding a resource (and so redirecting to that resource URL, like /items/:new_id) or deleting it (in that case redirecting to the general list at /items)

What would be nice, in those cases, is to be able to piggy-back the usual oob Toast and also redirect the user to the relevant URL. This is what I came up with:

<div hx-swap-oob="afterbegin:#toast-container">
  <MySuccessToast />
</div>
<div
  hx-get="/items"
  hx-trigger="load"
  hx-swap="outerHTML"
  hx-select="#content"
  hx-target="#content"
  hx-push-url="/items"
></div>

This accomplishes what I wish, but feels a little bit hackish, and I wonder if there are side-effects I haven't yet encountered. Any thoughts on this particular use case?

It would be nice to have something like HX-Swap-Location: /items which would basically accomplish the same thing under the hood.

Thank you.

Telroshan · 2023-11-01T08:27:13Z

Telroshan
Nov 1, 2023
Collaborator

Hey, if you want to do a full page redirect, I think you indeed won't really have the choice; you'd have to find a way to carry some value around to indicate that a toast should be rendered on your new page. You could do that for example either by adding some parameter values to your redirection URL (such as /items?showToast=deleted) or by setting a cookie, then using and clearing it when landing on your new page, to render that toast (the benefit here being that the value isn't visible in the URL)

Oob swap doesn't make much sense if you're making a full redirect, as it should be your new page's responsibility to display the expected content in the first place, on the initial load

What you can do on the other hand and you have already found it ; using hx-push-url, either as an attribute or as a header sent from your server.

So to answer your last question, don't worry, that isn't hackish, it's what this feature was made for, and using that push-url method is how you make a Single Page Application after all!
As for the side effects, you can indeed encounter some, given that the back button of your browser will load the previous version of that same page without refreshing the whole page / redirecting. This can cause some issues with say MutationObserver if you use any in JS, but in most cases, there shouldn't be any issue. Also note that if you want to replace the URL instead (i.e. replace the current history entry rather than adding a new one that can be crawled back using the browser's back button), you can use the hx-replace-url counterpart

1 reply

adicco Nov 1, 2023
Author

Thank you for your reply. I wanted as much as possible to avoid having in a page logic pertaining to other pages. For instance one can imagine redirecting to the index page from several locations; the code in the index then becomes bloated with notifications not directly related to the page's content.

In fact, I started with the cookie option you suggested. I did think of using a query string, but in terms of UX, people can get the notification again by refreshing the page (which can be fixed by manually updating the URL upon load, I suppose, but this does tend to bloat the code on my redirected-to page.)

Thank you for the tip re: hx-replace-url, I did experiment with that but for my use case actually preferred hx-push-url, although I encountered the issue of hitting a 'stale' cached page, but I managed to get around it by using (for instance on an /onboarding route I did want refreshed if the user went back)

document.body.addEventListener('htmx:historyRestore', function (evt) {
  if (evt.detail.path === '/onboarding') {
    window.location.href = '/onboarding';
    window.location.reload();
  }
});

Although I wonder if this can just be done by setting hx-history to false, which I need to experiment.

Thanks for your time!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Oob-swap and redirect combo #1935

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Oob-swap and redirect combo #1935

adicco Oct 31, 2023

Replies: 1 comment · 1 reply

Telroshan Nov 1, 2023 Collaborator

adicco Nov 1, 2023 Author

adicco
Oct 31, 2023

Replies: 1 comment 1 reply

Telroshan
Nov 1, 2023
Collaborator

adicco Nov 1, 2023
Author