https://htmx.org logo
Powered by
# htmx-general
  • b
    Hi, I need some help on this: I have a form with following attributes: 
    <form hx-target="#boards" hx-swap="beforeend swap:500ms" hx-post="/some/path/">
    which returns div, with following hyperscript: 
    <div _="on htmx:afterSwap log 'Settled!'">...</div>
    and appends it inside the 
    <div id="boards">
    what I want to achieve is that the appended div fades in, probably with hyperscript, something like 
    _="on htmx:afterSwap transition opacity to 1"
    but I can't even get the message to be logged to the console. Just to say, something like 
    _="on load log 'Settled!'"
    works fine, but it does it on page load, not when the element is inserted inside the dom. what is the correct event name for this? Is there a list of all event names for htmx? I couldn't find anything with google.
  • m
    Yes, you'll need to make sure that the URL you are pushing has two modes: when it is called via htmx, and then when it is loaded directly via the browers (e.g. a refresh). You can use the request header 
    HX-Request
    to differentiate between the two.
  • m
    Usually it boils down to rendering a layout or not
  • m
    depending on what you are doing server side
  • r
    Yep exactly, I'll use that to decide whether to render the entire page (including HTML body/head) vs just the element I'm replacing. Thanks for the help, I've been enjoying HTMX a ton 😄
  • m
    excellent to hear
  • m
    There is an event reference here: https://htmx.org/reference/#events
  • m
    I don't think you need hyperscript, you can write a CSS transition from the .htmx-settling class as in the second example here: https://htmx.org/examples/animations/
  • b
    Ah, now I get it. It's the hx-target that gets the class 
    .htmx-settling
    So I add some extra css to account for that. thanks! And the hyperscript must also be placed at the hx-target to work 🤓
  • m
    Super cringe, but idc you are all my frends:

    https://www.youtube.com/watch?v=DdIdZwDqkmgâ–¾

    > The DOM... > a hypermedia frontier... > I tried to picture, elements of information, > as they update through the server... > What did they look like? > JSON? XML? > Were the AJAX calls like boomerangs? > I kept dreaming of a hypermedia, I thought I would never see... > And then... > One day... > I got in...
  • g
    cringe culture is dead!
  • r
    Is it possible to write an entire SPA using just HTMX (where I'm just consuming a JSON backend)? The only issue I can see so far is handling routing, as I don't think HTMX has anything to help out with that (eg, if user loads index.html#test fetch certain content, vs index.html#nottest)
  • r
    Additionally, how would I go about using/nesting Nunjucks templates for example? Like if I want to make a template called "TodoList" that uses a separate template called "Todo", how would I go about doing that?
  • m
    Not sure, you'd probably have to pioneer it.
  • m
    Easy enough to turn JSON responses into HTML using the extensions
  • m
    but beyond that...
  • r
    Well I'll try my best 😄 The only pain points I've ran into so far is the routing (like I mentioned) and the automatic behavior for picking up values (it usually makes sense though)
  • r
    Plus it'd be nice if HTMX could ignore any fields that weren't actually filled out by a user, like ignoring the keys as well
  • m
    we follow the HTML convention w/ forms, where empty inputs are included in the submission
  • r
    Yeah, I see that you've written that in a few places in Github issues. That's understandable, so I think I'll just write some code using the excellent event API (htmx:configRequest) to remove all fields that are "empty"
  • m
    perfection
  • m
    🙂
  • r
    One more question: how does hx-trigger use 
    from
    and 
    find
    ? I keep getting syntax errors no matter how I try to combine them...
  • m
    can you post your code?
  • r
    hx-trigger="load, submit, keyup changed delay:500ms from:find input"
    is the relevant part
  • r
    specifically, I want this form trigger to happen when there is typing happening in any of the child inputs (or more generally, if there are any changes at all in the inputs/selects)
  • m
    OK, that from:find input isn't gonna work unfortunately
  • m
    there is a bug
  • m
    Can you switch to: 
    hx-trigger="load, submit, keyup changed delay:500ms target:input"
  • r
    Well I don't have the parsing error, but it doesn't seem to be doing what I expected:
    Copy code
    html
        <form id="filter" hx-trigger="load, submit, keyup changed delay:500ms target:input" hx-target="#results" hx-get="/search">
            <input type="number" name="year">
            <input type="submit">
        </form>
1...346347348...1146Latest