https://htmx.org logo
Powered by
# htmx-general
  • w
    if I run htmx.logAll() and it returns undefined is it safe to assume that htmx is not loading?
  • m
    no that's normal:
  • m
    that function just doesn't return a value
  • a
    I meant more on the lines of "manipulating your tree before you finally render it as HTML"
  • a
    Or at least parse it. An example would be to prune CSS. Or to inject attributes (obviously htmx attributes!) and so on.
  • f
    Which htmx event is appropriate to use when you want to take action after a successful DOM manipulation? I had hoped afterSwap or afterSettle, but I'm finding those events don't seem to fire if my 
    hx-swap="beforeend"
    .
  • m
    Ah, yeah
  • m
    the problem there is that the event is being triggered on the swapped content
  • m
    rather than the triggering content
  • m
    wait, 
    beforeend
    should be inside the triggering element, or is there a target involved as well?
  • f
    Copy code
    <form class="comment-reply mt-2" hx-post="{{comment_reply_url}}"
        hx-target="closest .comment-main" hx-swap="beforeend"
        _="
            on htmx:beforeRequest hide me
            then set value of <textarea/> in me to null
            on htmx:afterOnLoad go to the bottom of closest .comment-main smoothly
        "
    >
  • f
    Yes, hx-target is involved too.
  • f
    htmx:afteronload
    works, but I wasn't sure if it would fire when there was an Ajax error too. What I really want is an event that would fire after any/all DOM manipulations are finished.
  • m
    it looks like afteronload fires after the ajax the response has been processed, but not necessarily after all the content has settled
  • m
    htmx:afterRequest
    is fired no matter what happens w/ the request
  • m
    if 
    htmx:afterOnLoad
    is working for you, you could add handlers for 
    htmx:sendError
    and 
    htmx:sendAbort
    to handle the error situations (if you are using hyperscript, you can chain them together in one handler with an 
    or
    )
  • m
    let me say, as an aside, how satisfying it is to see htmx and hyperscript working together like this
  • m
    "Together with the replacement of Turbolinks and Rails UJS by the Hotwire combination of Stimulus and Turbo, we now have the most complete in-the-box front-end setup for writing great Rails applications ever."
  • m
  • m
    very glad to see them dropping node and webpack
  • m
    should be a good release!
  • b
    backend getimage endpoint returns image-file data and I have added the header "Content-Disposition", "attachment; filename=123.png" but instead of browser to download file it is replacing the tag with file data. My a tag is :
  • b
    Hi, I have a quick question for people developing with htmx. Do you use a custom endpoint prefix for "fragment" requests made by htmx, or are you just following the same rules as for other "regular" pages? I mean, people dealing with json data api usually go for something like 
    /v1/myresource
    for their api. Do you do the same for htmx with something like 
    /fragment/myresource
    or you just avoid having a prefix, and just use "normal" uri (same way as for regular pages)? Hope the question makes sense.
  • t
    For my limited use, I make the request as normal and then the server checks for the HTMX header to return either a partial or the full thing. In the future if I make more extensive use of htmx I think having separate routes will be better for me.
  • m
    ajax can't be used to download a file unfortunately. If you want to start with an ajax request for this, you would need to use an 
    HX-Redirect
    response header to make the front end issue a full request to the download URL. Alternatively, you can simply use a "normal" link to the URL.
  • m
    I try to follow the structure of the UI and think functionall. So, for example, if there is a contact resource I will have something like this:
    Copy code
    /contacts - returns the UI for all contacts, may check for HX-Request header to render without a layout
  /contacts/:id - same, renders normally and also without a layout, depending on headers
  /contacts/:id/notes - provides an inline editing UI for the contact details page, htmx only
  etc.
    the idea with the first two is that they should work when those URLs are boosted w/ hx-boost, but also when someone goes directly to them via a deep link, or hits refresh. the last one is specific to a given internal UI and never ends up in the nav bar, so it can be htmx only.
  • r
    Also generally you can have progressive enhancement if you check based on the header - which means that the site will work with and without JS
  • b
    Thanks for your feedback. Much appreciated. And I really like the taste of it (keeping a normal/functional structure, and playing with the header to have an enhanced mode with htmx, while falling back to normal rendering if not available/hard link/no js).
  • b
    Maybe just an additional question. For the first two, even if there is no partial rendering implemented on the backend, the pages can still be boosted at the level right?
  • m
    Yes, kind of by accident, because the parsing of the HTML will ignore all the non-body stuff
1...364365366...1146Latest