Using hx-on on a list partial (htmx Active Search)

[fullstackplus]

Hello, can you use hx-on on a HTML form element?

I have this code on the front-end; when I type in a search query, the function handleLoad() isn't getting called:

    <form>
        <input
          type="search"
          id="exercisesSearch"
          class="search"
          name="q"
          placeholder="Type to search exercises..."
          required
          hx-post="/exercises/search"
          hx-trigger="input changed delay:200ms, search"
          hx-target="#resultsContainer"
          hx-on:htmx:afterRequest="handleLoad()"
        />
    </form>

    <div id="resultsContainer">
      <%= erb :'exercises/search_results', layout: false %>
    </div>

    <!-- wrapper tags, etc -->

  <script>
    function handleLoad() { console.log("Partial content has been loaded!"); }
  </script>
</body>

I want hx-on to call a piece of JS that enables keyboard-only navigation of the HTML list returned by the server. When the page loads in the browser without AJAX the full list is displayed by default and the script works. However when the above form returns a list partial (the search results) the script isn't activated.

So I thought hx-on was the right approach to solve this. Is it?

[krotname]

Yes, hx-on can be used there, but there are two gotchas in your example.

First, use the kebab-case htmx event name in attributes. Attribute names are lower-cased by the DOM, so afterRequest is not the safe form. Use after-request, or the htmx shorthand:

<input
  type="search"
  id="exercisesSearch"
  class="search"
  name="q"
  placeholder="Type to search exercises..."
  required
  hx-post="/exercises/search"
  hx-trigger="input changed delay:200ms, search"
  hx-target="#resultsContainer"
  hx-on::after-swap="handleLoad()"
/>

Second, for your use case after-request is probably the wrong lifecycle event. It only tells you the request finished. Since you want to initialize keyboard navigation for the returned partial, run after the new HTML has been swapped in. Use htmx:after-swap, htmx:after-settle, or htmx:load.

I would usually attach this once globally and check the swap target:

<script>
  function handleLoad() {
    console.log("Partial content has been loaded!");
    // initialize keyboard navigation here
  }

  document.body.addEventListener("htmx:afterSwap", function (event) {
    if (event.detail.target.id === "resultsContainer") {
      handleLoad();
    }
  });
</script>

So: hx-on is a valid approach, but use kebab-case event names and prefer afterSwap/load for initializing behavior on swapped partial content.

[fullstackplus]

This works perfectly, thank you Andrei.