does htmx works well will bootstrap ? will all of js components work out of box ?

Did u ever check the documentation xd? there was an example of using bootstrap with htmx kek

By that i mean, theres an answer kek

i did just asking in general if any pitfalls i should be aware of

any open source projects i can look at ?

No, I think you should be fine. I use htmx with Tailwind in my personal projects, and at work we are migrating from Bootstrap 4 to Bootstrap 5 while adding htmx to the mix and we have no issues. As far I understand, htmx should work with all CSS frameworks.

https://blog.benoitblanchon.fr/django-htmx-modal-form/ and https://blog.benoitblanchon.fr/django-htmx-toasts/ are some great resources on how to connect htmx with bootstrap components.

Yep htmx and bootstrap work well together. Obviously if you are using bootstrap javascript there is some scripting work to do but it isn’t hard by and large. Good luck!

As others have said, it works great. I did a walkthrough of an application I converted to htmx a while back, and I wrote a post about that in particular. https://blog.bitbadger.solutions/2021/a-tour-of-myprayerjournal-v3/bootstrap-integration.html There's some information there that's specific to F#, but I used a couple of custom headers in my responses to show toasts and hide modals after I'd processed whatever information had been submitted in them.

maybe a suggestion regarding this? 🙂

My suggestion is to target one of the sections and only use hx-oob-true for the other two sections. If you have:

html
<form hx-post="/someURL" hx-target="#section1" ...>
  ...
</form>

Your response HTML should look like:

html
<div id="section1">
    Section1 New Content
</div>
<div id="section2" hx-swap-oob="true">
    Section2 New Content
</div>
<div id="section3" hx-swap-oob="true">
    Section3 New Content
</div>

The section1 div will be swapped in as if you were just returning the section1 HTML by itself. You already target section1 in the htmx request so you don't have to use hx-swap-oob for it. You just need it for the other two sections.

thank you, it makes sense 🙂

what's the trick to get a boosted form to update the URL after submission if the server responds with a 302? it doesn't pick it up automatically. i tried both the HX-Push and HX-Redirect headers to set the destination URL, but the URL doesn't change in the browser.

htmx makes a best effort to get the final URL in an

hx-push-url

situation, but unfortunately that API isn't 100% supported yet

You are probably issuing those headers before the redirect, and htmx never sees them. The way browsers work w/ ajax calls is you only see the final response unfortunately.

Hi *, is it possible to just use part of a hx-get response for replacement? E.g. I only want #content of the response to replace #content of the current page. Any suggestions?

Ah, I see that a similar question was aksed on the 25th already. I will try this first. 🙂

🙂 https://htmx.org/attributes/hx-select/

Thanks a lot!

And thanks a million for htmx - I am using it in an internal project at an insurance company here in germany. Love it.

🙂 I am glad you are finding it useful

What @User said in the second message - the AJAX request is following the redirect before it even returns to the browser. I fixed it with a 303 instead of a 302; a more detailed description is at https://blog.bitbadger.solutions/2021/a-tour-of-myprayerjournal-v3/the-user-interface.html#POST-Redirect-GET .

@User Do you have issues with this if the user disables JS?

If the user disables JS, htmx won't work either - the requests would go through the browser rather than AJAX. Generally speaking, browsers handle 302, 303, and 307 the same way, but for some reason, 303 returns from an AJAX call, whereas the AJAX request itself will follow 302/307s before it returns. I have yet to turn off JS and run this scenario (because I pretty much assumed htmx), but if you do, I'd love to hear how it works! (I'm truly curious; if I weren't snowed under with day-job stuff, I'd try it myself. If I don't hear back from you, I'll try it once I have the opportunity.)

Maybe I'm not following.. you simply changed the status code of the redirect that happens after you submit the form to be a 303 instead of a 302 and that's it? I just tried that and it didn't change anything.

In my particular case, I changed from a 307 to 303. From my observation, with a 307, the redirect resulted in a POST of the same information to the redirected URL (i.e., the browser said "Oh, I'm supposed to send this payload there instead"). When I returned a 303, the browser said "Oh, I need to go look for my result here" with a GET instead. Combined with

hx-target

, I was able to simulate a POST-redirect-GET pattern (which is what I tried to explain in the blog post; hopefully that came across). Keep in mind that, with htmx, whatever URL you send with the 303 should contain all the content needed to refresh the "main" part of your page. Without htmx (no JS), the response from that URL should display an entire page; at that point, you're just writing a traditional request/response web application. 🙂 Like I said, I haven't tried this without JS. The browser tools will show you what the AJAX request is, and how it eventually resolves; your server-side logs should show you the sequence of requests, so you can see if the URL you're returning with the 303 sends back enough information to render the page. (Debugging will be a bit different if you're trying to make it work with htmx or without it.)

hi everyone! is it possible to do oob swap and also establish the swap time on oob elements? Like:

hx-swap-oob="true swap:1s"

while the anchor tag triggering the swap has

hx-swap="false"

I also don't see the htmx-swapping/htmx-added classes added to oob elements, is this configurable somehow or default behaviour? maybe I should just move the indicator up in the tree? thanks for your help! I am enjoying htmx so so much that I try to include it on any project upon minor provocation 😆 EDIT: just went ahead and pointed the indicator higher on the tree, works fine, solved!

hey how can I do a hx-push-url from inside returned html? this does not work because it is not making it's own request:

<div hx-trigger="load" hx-push-url="/app/test?{{ query }}"></div>

my hack is I just made an empty endpoint 😆

<div hx-get="/app/empty" hx-trigger="load" hx-push-url="/app/test?{{ query }}"></div>

I think you want the hx-push header