HTMX request content not being swapped despite receiving proper response

Question

In my ASP.NET Core MVC project, I have a Bootstrap 5.3 modal whose contents are loaded by hx-get. The contents loaded in the modal are the ff.:

<form hx-put="/Edit/BasicInfo" hx-target="#editModalContent" hx-swap="innerHTML"
 class="reg-form" id="editBasicInfoForm">
 @* form fields here *@
 <button id="editSubmit" type="submit" class="w-100 mt-3 btn btn-lg btn-primary">Edit</button>
</form>

note: #editModalContent is the content div in the modal

When I click the Edit button, I expect the BasicInfo action method to run properly and return an html (which is just a green tag which says "Success"). When I submitted the form, everything works properly until the swapping of content into the DOM which never happened.

I added the ff. js scripts to check for response and swapping:

document.addEventListener('htmx:afterRequest', e => {
 console.log('PUT Success!')
});
document.addEventListener('htmx:beforeSwap', e => {
 console.log('Before Swap!')
});
document.addEventListener('htmx:swapError', e => {
 console.log('Swap Error!')
});
document.addEventListener('htmx:afterSwap', e => {
 console.log('After Swap!')
});

When I tried to submit the form again, no DOM changes occurred despite of correct response in devtools. I checked the console and the ff. are displayed:

Before Swap!
PUT Success!

To me, this means that swap never finished, but I don't know why.

Why isn't swap being completed? I want the content to be swapped accordingly.

• C3roe: Guessing that probably has something to do with how BS handles the modal element. I haven't checked in detail how BS does it, but a lot of times libraries move elements to a different location in the DOM, to be able to show the modal "above all", without it getting trapped in the formatting of whatever elements it might originally have been nested into. Could be that it somehow makes it not find the element, at the moment it tries to perform the swap. (I am assuming that if you targeted an element outside of the modal, it works as expected?)
• Iooosef: I tried adding simple htmx button that will be loaded into the Bootstrap modal by another button's hx-get: ``` <button type="button" hx-get="/Debug/hxGetTest" hx-target="this" hx-swap="outerHTML">Test</button> ``` the endpoint returns an <h3> text When I clicked it, nothing happened. I checked devtools and saw that I received the response in the Network tab. The htmx.logAll() logs also confirms that the response from the server was received and htmx:beforeSwap started but never finished. It seems to me that any content swap done by htmx inside a Bootstrap modal doesn't work.