oh, yeah, you'll need to build that server side

How would I be able to populate the URL server-side? My server-side reads the parameters and returns results, but wouldn't setting the URL be a client side activity?

hx-post="/app/search/"

I guess I need to dynamially populate this string based on the form values, using JS

Well, the htmx way is to have that hx-post be part of some content that is replaced or rendered somehow

It's just a URL

when you render the hx-post, render the url properly

I have a hidden div under my filter menu. And I target this div to swap in the html returned by my POST - args from filter. I guess what I'm missing is how to "render the url"

<div 
  id="search-results"
  class="hidden"
>

I'm looking at using alpine to set

x-data

on the form which binds the form data. I also have a js expression that creates the URL from the selected items in the form. However, blocked on being able to use the resulting js expression in

hx-post

Unless there's a native htmx native way to template the hx-post string, an hx-push-url would then work

Oh hmm maybe I need to generate a redirect url

It worked! My solution (not sure if this is considered a hack) is to basically take in the POST, then redirect to a GET with the query strings. with

hx-push-url="true"

this populated the URL in the browser with my crafted string

hotwire is the future

Please point me in the right direction: I have a button, that on click swaps my current line in a table with a form:

html
<button class="btn btn-primary btn-sm"
        hx-get="{% url 'detail' product.pk %}"
        hx-swap="outerHTML">
    edit
</button>

There are multiple buttons, what would be the best way to prevent a user from swapping multiple forms at once? I want a click outside this row or on any other edit button to close the form right now and open the selected one.

You might want to use a global bit of state in this case and then an event filter:

html
<button class="btn btn-primary btn-sm"
        hx-swap="click[noOtherEditsOngoing]"
        hx-get="{% url 'detail' product.pk %}"
        hx-swap="outerHTML">
    edit
</button>

and then manage the

noOtherEditsOngoing

state in the responses to the edit/update/cancel responses

I know this isn't htmx related, but I'm so pleased with it I'm going to mention here as well: in the next release of hyperscript, hopefully tomorrow, the

fetch

command will support both configurable timeouts as well as a really slick way to abort requests via a

fetch:abort

event:

html
<button id="btn1"
        _="on click
             add @disabled
             fetch /whatever
             put the result after me
           finally
             remove @disabled">
  Get Response
</button>
<button _="on click send fetch:abort to #btn1">
  Cancel The Request
</button>

this stacks up really well when compared w/ the javascript:

js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

here it is in action, very pleased with how this turned out, and will likely integrate this 'event for request cancellation' idea into htmx as well. Events (and async transparency) for the win!

#Great Talk, it was really eye opening I am watching many HTMX Tutorials, any recommendations?

There are some podcasts on the talk page: https://htmx.org/talk/

Thanks a lot ill try to listen some while driving

is there an example somewhere I could follow?

First, thanks for your help. Appreciated. I tried to combine the information from hx-swap documentation and hx-trigger filter documentation. If I understand that correctly (please correct me) you meant I should put a second

hx-swap

in my button, which triggers on click:

hx-swap="click[noOtherEditsongoing]

- does this mean, I should put the logic that prevents a user to click another button in a js function?

var noOtherEditsongoing = function() { ... return true}

or am I completely off-track?

No, that's the general idea. Maintain a global variable in javascript to use in the filter. Another option would be some javascript to disable all the buttons on edit and re-enable them on save/cancel.

(If they are real

<button>

elements)

Is it a good Idea to have HTMX with Bootstrap for a medium Ecommerce site 500-1000 products, thanks in advance

Merry Christmas, you savage band of merry misfits!

On the face of it, yes.

I am not a pro, i am somewhere between junior and mid, so it’s gonna be a hassles 🙂

I would argue all the more reason to use htmx on the front-end, you will avoid a lot of complexity that way. BUT... it all depends on how comfortable you are with rendering html partials from your backend, whatever stack that may be.

Merry Christmas to all in HTMX House, and to all a good night.

Hi guys, i'm trying to get bootstrap-select (https://developer.snapappointments.com/bootstrap-select/) to work with HTMX. Has anybody been able to do it? Right now it does not seem to work.