https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    are you saying you see this on the demo page, or on your own implementation of it?
  • m
    the demo page is working properly for me
  • f
    Yes, the demo page is working fine. Above is what is different on my implementation (swapping the form for a table and div for tr)
  • m
    ah
  • m
    closest tr
    means "closest enclosing parent tr"
  • m
    so there is no 
    tr
    enclosing the table
  • m
    which is why you are getting the target error
  • m
  • f
    I see, removing the 
    hx-target
    and all other htmx attributes from the 
    <table>
    makes the sort on 
    <tbody>
    work without a target.
  • f
    The reason is I have functions on the table, and a sort on the trs
  • f
    If I specify a target on the 
    tbody
    , the 
    tbody hx-target
    overwrites the 
    table hx-target
    . If I omit the 
    tbody
    target, the sortable uses the 
    table hx-target
    .
  • f
    Is that intended behavior?
  • m
    Yes
  • f
    Okay thank you. What would be the htmx approach to having a child-element trigger a different target with a different event independently from the parent then?
  • f
    In this case, a button inside a 
    <tr>
    swapping out its parent 
    <tr>
    (the attributes that are on the 
    <table>
    ) and a separate sortable on the 
    <tbody>
    that sorts said ``s
  • f
    Or is that outside of htmx' scope? Maybe I am approaching this the wrong way.
  • g
    Copy code
    js
htmx.on("htmx:beforeSwap", e => e.waitUntil(async () => { /* load libraries... */ })
    would this be a fine solution (if it existed)?
  • p
    Anyone know of some example code using htmx and websockets, preferably with django.
  • m
    Is this not legal html? I can't put these divs or form inside a button? the form is always shown without styling
    Copy code
    html
<!-- DROPDOWN: START -->
        <button type="button"
          class="group relative inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100"
          id="menu-button" aria-expanded="true" aria-haspopup="true">
          Options

          <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
            aria-hidden="true">
            <path fill-rule="evenodd"
              d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
              clip-rule="evenodd" />
          </svg>
  • m
    Copy code
    html

          <div
            class="absolute group-focus:block hidden right-0 z-10 mt-9 w-56 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
            role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
            <div class="py-1" role="none">
              <a href="#" class="hover:bg-gray-100 hover:text-gray-900 text-gray-700 block px-4 py-2 text-sm"
                role="menuitem" tabindex="-1" id="menu-item-0">Account
                settings</a>
              <a href="#" class="hover:bg-gray-100 hover:text-gray-900 text-gray-700 block px-4 py-2 text-sm"
                role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
              <a href="#" class="hover:bg-gray-100 hover:text-gray-900 text-gray-700 block px-4 py-2 text-sm"
                role="menuitem" tabindex="-1" id="menu-item-2">License</a>
              <form method="POST" action="#" role="none">
                <button type="submit"
                  class="hover:bg-gray-100 hover:text-gray-900 text-gray-700 block px-4 py-2 text-sm" role="menuitem"
                  tabindex="-1" id="menu-item-3">Sign out</button>
              </form>
            </div>
          </div>

        </button>
        <!-- DROPDOWN: END -->
  • m
    Tailwind UI does it separately but I want it contained inside the button
  • m
    it all works without the form inside
  • m
    It's actually quite annoying that I have to use js to make components like dropdown buttons work right
  • m
    there should be built in components
  • m
    (that you can style better)
  • m
    i don't think you can put forms in buttons
  • m
    typically you would have the drop down div as a sibling, at least that's what I've seen
  • m
    I looked it up and no, you cant
  • m
    wait till you find out about tables
  • m
    yea I've seen that as well but I want it under the "button"
1...827828829...1146Latest