← Back to context

Comment by yawaramin

3 days ago

Htmx offers more flexibility than Alpine Ajax. Here's an example: htmx allows using relative selectors, which allow you to target elements relative to the triggering element in the DOM tree. This gives us a lot of power for swapping in pieces of UI without having to make up ids for lots of elements.

I have a blog post in the works for this feature, here's a small code sample I made to show the idea:

    <div class="card"> ╾──────────────╮
      <header class="card-header">    |
        <a                            |
          class="button is-link"      |
          title="Load links for #167" |
          role="button"               |
          aria-expanded="false"       |
          href="/app/notes/167/links" |
          hx-trigger="click once"     |
          hx-boost="true"             |
          hx-push-url="false"         │
          hx-target="closest .card" ╾─╯
    ╭───╼ hx-swap="beforeend show:none"
    |   ><b>±</b></a>
    |   <a
    |     class="card-header-title"
    |     href="/app/notes/167"
    |     hx-boost="true"
    |     hx-target="#note"
    |     hx-swap="outerHTML transition:true show:window:top"
    |   >#167 Velificatio</a>
    | </header>
    ╰╼
    </div>