Ok cool. I'll put up a blog post with a tutorial on it. If I asked very very nicely, would you be willing to do a quick review of it when I'm done before it goes public, just to make sure I haven't done anything stupid with the tutorial?

the primeagen effect in the wild

And hn

Of course

Hi!

is there a way to make a table head behave like a form without wrapping the entire table in a form (since it's not possible to wrap on its own in a form)?

sure, you can have a form adjacent to the table and inputs inside the thead which are connected to the form

using https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form

ohhhhhhh sweet ! thank you

that changes my life

Sure! 🙏 Congrats!

I needed to use delay, hx-vals (w event.detail) also from:window and got error. same with -> https://github.com/bigskysoftware/htmx/issues/1189

throttle works ok

PR #1460 🙂

Hey all. I have the following search form that I want to submit via HTMX as I'm going to add some extra inputs for filtering. When I add the hx-get and hx-trigger to the input the get is triggered within 500 ms. However, when I add this to the form it takes ages to trigger. What am I doing wrong?

<form class="flex items-center"
  id="search-form"
  hx-get="{{bot.get_url_list_url}}"
  hx-trigger="change, keyup changed delay:500msfrom:#search"
  hx-target="#url-form"
  >
<label for="search" class="sr-only">Search</label>
<div>
   <input type="text"
      id="search"
      name="url__icontains"
      placeholder="Search" required="">
   </div>
</form>

never tried this but...

delay:500msfrom:#search

is suspicious to me. Is it on purpose that there is no space between

500ms

and

from...

? might it be that js does some weird evaluation of what a delay of value

500msfrom:#search

means? it might not be evaluated as 500ms anymore, that's my thought. there is a clear space divide in the example:

also I'd try to keep the

hx-get

and other attributes on the

<form

... Since you have an "on change" listener on the form already I am pretty sure that the

<input search

change will bubble up to the

<form

so you might not need this part at all

from:#search

depending on circumstances.

Hello does anyone encounter

htmx:swapError

before? I'm very confuse why this error occured

html
            <tr>
              <td colspan="3">
                <div class="mt-5 py-12 px-4 bg-gray-50">
                  <div class="text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 mx-auto text-gray-400">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
                    </svg>
                    <h3 class="text-gray-900 font-semibold text-sm mt-2">No {{ pluralize(type) }}</h3>
                    <p class="text-gray-500 text-sm mt-1">Get started by creating a new {{ type }}.</p>

                    <div class="mt-6">
                      <button
                        class="inline-block rounded border border-indigo-600 bg-indigo-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring active:text-indigo-500"
                        hx-get={{ createUrl }}
                        hx-target="closest tr"
                        hx-swap="outerHTML"
                      >
                        Add {{ type }}
                      </button>
                    </div>
                  </div>
                </div>
              </td>
            </tr>

And theres other error on browser log

How I can debug this kind of issue?

Have you read https://htmx.org/docs/#debugging ?

no I havent, thanks for pointing out

I am looking for a good example where

hx-target

using

next

,

previous

or

find

are useful. Anybody that has used this in a demo or a real world application?

I'm very confuse right now, what should expect on the log? Currently, I can see the target element I assume the implementation is correct

No there is a space. That was a cut and paste error

Could you provide a response example so that we can try to repro this?

Hi there, I'm using Django and have used this modal tutorial to get a modal to load, which works perfectly when the whole page is loaded for the first time. However, I reload the section of the page with this button on using a partial, and the button no longer works. I'm using simple-datatables https://github.com/fiduswriter/simple-datatables

Ohhh I found the problem because of the response - thank you for pointing out