hx-swap-oob doesn't seem to work when initiated from a client xhr request

[anorman1967]

Hello all,

First, let me start by saying this is the javascript library I've been looking for for years now.. I did some React, but this is just cleaner, easier to understand and much faster!

Now, on to my issue.. I'm not sure if I am doing something wrong, if I am misunderstanding something, if this is a bug or a limitation.

I'm using HTMX 2.04 and oob swaps work perfectly when they are initiated on the client from an hx-get request.

If the client initiates a request from an HXR request, however, the oob code is sent but it just gets appened to the end of the element getting swapped out in the call -- it doesn't actually process the oob and place it in the proper div...

Is HXR oob supposed to just work out of the box? Are there some settings I need to do, or configuration I need either on the client or the server to support it?

for reference, here is the client side js code that initiates the xhr request.

const xhr = new XMLHttpRequest();
xhr.open("GET", did, true);

// If specified, responseType must be empty string or "text"
xhr.responseType = "text";

xhr.onload = () => {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      document.getElementById('content').innerHTML = xhr.responseText;
    }
  }
};
xhr.send(null);

in a nutshell, the application when first called from the client sends the proper html page to the client.. it also may send a cookie to do some special processing.. when the clent starts, there is a body onload function that runs and if that cookie is present it reads the cookie and then using the above xhr function gets the page in the cookie and stuff it into the content element of the page.. sometimes inside the server response is an swap-oob for a different element. it doesn't replace that element, however..

if there is no special cookie, upon load there is an hx-get to a specific page with an hx-trigger="load" on the content element and when that fires if there is a swap-oob that does indeed work correctly.

the server either sends a special cookie OR will send the html code with the hx-get hx-trigger in the content element but not both.. hx-get method honors swap-oob hxr does not. the server computes and sends the same oob code every time (verified using google chrome developer tools).. in the case of the hxr is just appends the hx-swap-oob div and code to the bottom of the content element.

I'm assuming I am doing something wrong, but I have no clue as to what..

Thank you in advance for any help/advice/direction etc you can provide..

• Andre

[Telroshan]

Hey, indeed when constructing a XMLHttpRequest yourself, htmx will simply not know about it as it was never called during the process, and will not be able to process its response. There's no magic involved here; all the htmx response handling usually happens because htmx itself made the request!

If you're interested in handling this request's response like a usual htmx request, then you will likely want to use the JS API, specifically the htmx.ajax method, that lets you make a request with whatever method / params / body you want, while triggering all htmx logic along that you would expect

Hope this helps!

[anorman1967]

Thank you.. that explains everything.. I'll rewrite the cient code to use htmx.ajax.. didn't even realize that was in there :-)

THANK YOU!!!

[anorman1967]

REPLACED the entire xhr section with a single line of code, and now everything works as expected..

THANK YOU SOO MUCH!!!!!!!!!!!!!!!!!!!!!!!!!!