https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    a guess is that somehow the mainModalClose() is removing the source from the DOM, so the server-triggered event isn't propogating up to the body
  • g
    Yes, it is, by my own poor design choice. My mistake was to think that even if the source div is not there, the event will still reach the body element. But now (correct me if I am wrong), I see that the source has to be there, even if it's set to display: none. So what should be the usual route in usage like mine? I have somehow made it to work but want to confirm if its the right way: 1. Load up an edit form via HTMX and it comes in as a modal. 2. Hook up the form to 
    htmx:beforeSend
    and 
    htmx:afterRequest
    like this, so that it closes when htmx tells it that request has completed:
    Copy code
    form.addEventListener('htmx:beforeSend', function() {
                // Show the loading spinner
                spinner_container.classList.remove("hidden");
                spinner_container.classList.add("block");
            });
            form.addEventListener('htmx:afterRequest', function(){
                mainModalClose();
            });
    3. And now it works. The server is sending a message back to the client via the hx-trigger and it is handled not by the form but by the body's event listener and shown in a toast. I intend to use the same mechanism for other parts of the app as well, so that is why the handler is with the body. My question is, is this okay? Is using 
    htmx:afterRequest
    okay? Or should I send another event from server, explicitly to tell the form to close itself?
  • l
    I ran into a fun little problem this weekend; adding JavaScript initialization code that will fire once the content is loaded. Initial load fires 
    DOMContentLoaded
    , but htmx-swapped content doesn't do that. The solution ended up being 5 lines in F#, but I thought I'd share it here for non-F# folks, as the algorithm is the same. For context - the 
    jsOnLoad
    function writes a 
    script
    tag that will fire once the content is loaded. For my case, I have a 
    textarea
    where Markdown can be written, and a "Preview" button that will replace that with a preview. It's handy for attaching event listeners, etc.
  • l
    Copy code
    fsharp
let jsOnLoad js isHtmx =
    script [] [
        let (target, event) = if isHtmx then "document.body", "htmx:afterSettle" else "document", "DOMContentLoaded"
        txt (sprintf """%s.addEventListener("%s", () => { %s }, { once: true })""" target event js)
    ]
  • m
    that seems reasonable to me, the one thing I can think of is you might want to not close the modal conditionally on validation errors, in which case I would instead send an event to close the modal if there are no errors, and re-render the form w/ errors if there were.
  • b
    Oh, okay. At least now I understand my problem. 😉 Are there any workarounds, except putting any .js and ._hs that might be needed somewhere on the 
    <head>
    of every page? Something like hacking preload to preload external scripts instead of images, for example?
  • b
    Or in an act of desperation, is it possible to "unboost" a specific page instead of a specific link? It would not be practical to manually put 
    hx-boost="false"
    on any 
    <a href="">
    tag that links to a page which will request additional JS resources, but it would be feasible to put some sort of "if you came here from a boosted page, please load me the traditional way instead"-tag on those pages.
  • b
    So, I'm starting to look at custom HTTP headers as a place to tuck stuff I could work into the URLs but don't want spreading via the copy/paste and doesn't really fit cookie lifecycle... am I going to the dark side
  • b
    With an awareness of how it affects caching of course
  • m
    Not sure if this is acceptable, but I usually put my JS in a single file loaded up front and then cached forever using a cache-buster tool, and then init what's needed for a given page
  • l
    By default, elements with the class 'htmx-indicator' will flash when a page is first loaded. Here is where htmx loads indicator styles (https://github.com/bigskysoftware/htmx/blob/d6c120717d79fb578dd250baa8962ba7ffeba3dd/src/htmx.js#L3367). With alpine or vue, they have a convention of putting an attribute such as 'x-cloak' or 'v-cloak' on an element, and the attribute is removed once the element is deemed loaded by the framework. Is there a similar convention with htmx? Right now, I hide elements with the class 'htmx-indicator' until the 'htmx:load' event fires (which happens after the indicator styles are applied: https://github.com/bigskysoftware/htmx/blob/d6c120717d79fb578dd250baa8962ba7ffeba3dd/src/htmx.js#L3392). Another solution that does not require JS is to set the config to not use indicator styles and then provide your own CSS in the head, but if htmx changes in the future, this CSS might fall out of date...
  • l
    Did you have a chance to look at the proposed changes to hx-location? If so, any thoughts before I open a PR?
  • h
    No sorry, wife gave birth this week. You should open a pr 🙂
  • s
    I need to make a little one-field/cancel-button/submit-button modal form... any tips or places to look for an example?
  • g
    What's the best way of chaining fetches? I have a button that will hit an endpoint with quantity and then depending on the result hit it again with some other parameter
  • b
    Quick Q about tables - I'm building a webmail app. At the moment, I have an inbox that's a table and I've put some hyperscript on the ``s to navigate to an individual email. However, I'd now like to have a delete icon in the row. I'm putting an 
    hx-post
    on the 
    <td>
    but it looks like the hyperscript is triggering first. Is there any easy way to achieve what I want?
  • g
    have them be separate things. Maybe the title of the email is clickable and there's a separate column with controls. In my experience, any design that nests handlers is going to be a pita, no matter what you do.
  • b
    Makes sense. Cheers!
  • m
    congrats!
  • o
    I love the essay tab on htmx.org thanks for putting thoughtful resources out there as well as grug-pilled memes. We need the balance. I was reading through Taking HTML Seriously this morning and just wanted to share my favorite reference to the saying, "Fish don't know they're in water".
  • h
    I've been trying really hard to come up with a good hypermedia joke. We named her out of band. We plan on swapping by Id for the next one
  • m
    hx-post=“/gone-family/babies/new” value=“gone jr” hx-target=“#happy-gone-family-home”
  • a
    GET
    sleep when you can 
    POST
    online to friends if you need support 
    PUT
    some time aside for you and your wife to dedicate to each other 
    DELETE
    everything in your calendar for next 2 months!
  • b
    I'm currently looking into it. Some packages I use (
    django-select2
    and 
    django-tinymce
    ) will add their own, custom 
    .js
    files, which are by default only loaded when required by a rendered form, so I might have to go in and do quite some manual work. To be honest, I might be better off using 
    hx-boost="false"
    for the time being. 😭
  • b
    Would the idea of a tag to let htmx know NOT to boost a page be something worth considering, or is that a bad idea? So that instead of looking for any link which points to a form, and adding 
    hx-boost="false"
    to those, I would instead just add a little 
    <meta htmx-unboost="true">
    on my form template's 
    <head>
    . Then I'd have boosting where it's not problematic / easily handled by including some additional 
    .js
    files in my default 
    <head>
    , but all my pages containing certain form elements should still work because they will only be loaded like it's 1999.
  • m
    It seems like it's the target of those links that you want loaded like its 1999, rather than the whole page, right?
  • b
    Yes, the target as in a user clicks on 
    <a href="/maintenance/task/add/">Add new task</a>
    and even though this link has inherited 
    hx-boost="true"
    , because there's some special marker/tag included in the response, htmx let's the browser render the entire response as a whole instead of merging it into the DOM
  • m
    🤔
  • a
    Hi all. I'm struggling to get HTMX to trigger a function on an event. Is this the right channel to elaborate ?
  • m
    sure
1...995996997...1146Latest