that way it updates the "shape" without losing the pointers to original dom. but i'm new here

if I send a

HX-Location

header is there any else I need to set? (Like a return that's not 200?) I have the response header set and the page does have htmx. If instead I put a boosted link on page that does work.

a 200 response w/ that should work

me grug make header me no why no boost me

lemme try to breakpoint around there, thx

is there a CDN with sourcemaps or unminified?

it doesn't look like the

function fr(s,l...

is ever getting hit

What's interesting is that fr() isn't used anywhere else in the code

ah... so was sending down with the initial page, not in regards to a separate request

so just a on load event did it, got it. so it doesn't work if its clean page request. shouldn't onload check for response headers?

Hi. I am having a problem with an OOB swap. I am returning a response with an HTML fragment that targets a TBODY and another HTML fragment that is to be swapped OOB. When the response is handled, a part (not the entire) of the is actually being swapped into the normal TBODY target instead of the its designated OOB target. If I only send 1 of the fragments back in the response, they get placed where intended. Here is what it looks like:

<!-- The Response contains both the fragment for normal replace and the oob swap fragment
     This will put part of the OOB into the normal target #table-body-->
<tbody id="table-body">
  <tr>
    <td>First</td>
    <td>Second</td>
    <td>Third</td>
    <td>Fourth</td>
  </tr>
</tbody>
<div class="paging-container" hx-swap-oob="true" id="pagingcontainer">Strange Swap!</div>


<!-- When you use just the OOB in the response it replaces the #pagingcontainer properly -->
<div class="paging-container" hx-swap-oob="true" id="pagingcontainer">Strange Swap!</div>

<!-- When you use just the normal swap fragment with no OOB fragment it replaces in the target fine -->
<tbody id="table-body"><tr><td>First</td><td>Second</td><td>Third</td><td>Fourth</td></tr></tbody>

Am I doing something wrong? Or might this be a bug/

https://github.com/bigskysoftware/htmx/issues/1198 seems related

Is there a way to specify Select-Oob in response header?

What's your use case? If the server knows, what should be oob swapped, it can just render it as oob elements

Hey I am having an issue with HTMX. I am calling a HTML swap and getting a template from flask. before the template is called, the cookie on the page is changed to a specific value. I am then calling a JS function with htmx:afterSwap. Like so:

document.addEventListener('htmx:afterSwap', function (event) {
        console.log("Running checkCookie() function")

        // Check if the "current" cookie has a value of "0"
        if (document.cookie.includes("current=0")) {
            // Add the "hidden" class to the button with id "prevBtn"
            document.getElementById("prevBtn").classList.add("hidden");
        }
        if (document.cookie.includes("max=1")) {
            // Add the "hidden" class to the button with id "prevBtn"
            document.getElementById("nextBtn").classList.add("hidden");
            document.getElementById("nextBtn").classList.remove("hidden");
        }
        else {
            // Remove the "hidden" class from the button with id "prevBtn"
            document.getElementById("prevBtn").classList.remove("hidden");
        }
    });

Does afterSwap wait until it has successfully finished swapping? because the it is going to the else, and not detecting the correct value of the cookie

Essentially, I am trying to hide the "previous" button in a multi step form when current step = 0

Or if anyone can suggest a better way i'd be grateful!

Ended up using a header instead of a cookie 🙂

tables are really hard to deal with when combined with oob swaps unfortunately

Yeah It looks like it could be related. I have been trying a bunch of different combinations to get a workaround to this use case. Need to replace the on a table with new content and swap OOB a . The closest I have gotten is: Here is the input field that starts the request:

<input class="field-input filter-input" 
       hx-include="#sort-criteria" 
       hx-indicator="#filter-ind"
       hx-post="..."
       hx-select="#table-body"
       hx-select-oob="#pagingcontainer" 
       hx-swap="outerHTML swap:.4s" 
       hx-target="#table-body"
       hx-trigger="keyup changed delay:500ms, search" 
       id="filter-input" 
       name="filter" 
       placeholder="Type to filter results"
  type="search">

And here is the response from the server:

<div>
  <tbody id="table-body">
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
      <td>Fourth</td>
    </tr>
  </tbody> 
  <div class="paging-container" 
       hx-swap-oob="true" 
       id="pagingcontainer">Strange Swap!</div>
</div>

This will result in the OOB division getting swapped in properly, but the tbody just disappears from the DOM. I had to wrap both elements in a to even get that OOB to work.

Can you trigger an event on the div instead?

and have it refresh in a separate request?

I will give that a try next. Thanks for the suggestion

The div has a paging element for the table. So it would need to go to the database again to calculate the results for the paging pages etc.

maybe I would be better off just bringing back everything wrapping the table and that paging component

expanding the target is always going to be the simplest solution

Right. Thanks for all your time and effort you put into this library. Really appreciate it

no problem at all 🙂