javascripthtmlflaskhtmx

Multiple triggers for HTMX?

Is it possible to enable multiple trigger types for HTMX? I want to trigger HTMX on either content change or page load. Currently, only the first trigger (change) is executed although I include both change and load in hx-trigger:

<select name="area" id="area" hx-post="/api/search" hx-trigger="change load" hx-target="#neighborhood" class="block">
  <option>eby</option>
  <option>nby</option>
  <option>pen</option>
  <option>sfc</option>
  <option>scz</option>
  <option>sby</option>
</select>
Solution

  • Comma-separate your trigger types:

    <!-- hx-trigger="change, load" -->

<select name="area" id="area" hx-post="/api/search" hx-trigger="change, load" hx-target="#neighborhood" class="block">
  <option>eby</option>
  <option>nby</option>
  <option>pen</option>
  <option>sfc</option>
  <option>scz</option>
  <option>sby</option>
</select>