https://htmx.org logo
Powered by
# htmx-general
  • a
    undefined
  • a
    Do you mean in the selector or as the name itself?
  • t
    Both.
  • a
    No difference. Both still logged as empty.
  • t
    Can you inspect the request in your browser devtools?
  • a
    "No payload for this request" Rest appears as expected (POST, path, etc)
  • t
    Just to debug a bit further, try 
    hx-include="input[type=checkbox]"
  • a
    Ok this is interesting... I had tried that before, but had only looked at the server log, which still outputs nothing 
    {}
    . However, I just tried again and also looked in devtools, and there it sends the expected payload:
    Copy code
    expire=4823&expire=7813&expire=7531&expire=7483
    So now there are two questions. 1. Why does the express log not show the payload in 
    req.query
    , 
    req.body
    , or 
    req.params
    ? 2. Why does the htmx selector 
    [name='expire']
    not give the same results as 
    input[type=checkbox]
    ?
  • a
    One final data point: 
    hx-include="input[name=expire]"
    does send the correct payload.
  • t
    Do you have other things in your DOM with 
    name="expire"
    ?
  • a
    No just those checkboxes. Now 
    hx-include="input[name=expire]"
    and the version with single quotes around expire is sending the correct payload too... So that part seems to be fine now (not sure why my first attempt said no payload but let's ignore that). So at this point it's really an express question rather than an htmx question...
  • a
    Maybe I have to enable some middleware...
  • t
    For that, I suspect 
    expire[]
    will fix it for you.
  • a
    Actually, it turned out that I just needed 
    app.use(express.urlencoded({ extended: true }));
    because express doesn't parse the body unless you explictly enable that with middleware.... So, problem solved. Thanks for your help!
  • t
    Glad ya got it working. I have very little experience with express
  • a
    New question: Consider the bulk update example (https://htmx.org/examples/bulk-update/). Say you wanted to handle a server error... perhaps the person making the request had lost their activation privileges since the page loaded. Just to confirm my understanding of htmx: There is no concept of conditional behavior on the client based on the server response, correct? The way to handle that would be, eg, to have the server send back the entire table, unaltered, including an error message at the bottom or something like that (in case of error) and send back what it currently does in the example in case of success?
  • t
    Correct, it is the server's job to respond with what should be displayed.
  • t
    The server could just respond with the same content as if the process was successful, but without actually saving any changes. Or it could redirect the user to another page with an 
    HX-Redirect
    header to explain why the user's access has been revoked, or anything in-between.
  • a
    Looks like you could also do a 
    HX-Retarget
    to retarget to something like 
    <div id="err-msg">
    with the server's error message. That strikes me as bad practice though.... it makes things more magical and seems to violate LoB... Although as a catch-all for unexpected server errors (eg, retargateing to a single "toast" style div at the top of the page) it might be appropriate. Curious what you think @mysterious-toddler-20573 ?
  • m
    🙂 htmx has been around for a while, and I always get frustrated with other libraries that don't make things extensible. Figuring out that events could be used effectively for this stuff helped a lot.
  • l
    Once again, this may be a stupid/obvious question but how does one load a javascript library using HTMX so that it doesn't break when HTMX is used to load new data into the page?
  • m
  • m
    Copy code
    js
htmx.onLoad(function(content) {
    var sortables = content.querySelectorAll(".sortable");
    for (var i = 0; i < sortables.length; i++) {
        var sortable = sortables[i];
        new Sortable(sortable, {
            animation: 150,
            ghostClass: 'blue-background-class'
        });
    }
})
  • m
    It also depends on what kind of JS library you're using. For example, the ones using data-attributes to bind events to DOM elements, like Stimulus or Alpine, will work out-of-the-box with htmx: as they are registered at the web-page level, they are aware of new elements being added to the DOM by htmx and are able to bind their event listeners.
  • l
    I'm using both a proprietary animation library based on GSAP (called Piengrow interactions), an SVG animation library allowing me to export After Effects animations to HTML5, called Lottie and a slider library called Slick. What basically happens when I load new pages over HTMX (I've created a website that switches between pages using HTMX in order to mimick an SPA experience) is that my animations freeze and my sliders bug out... I'm hoping what was shared here can somehow prevent that.
  • m
    Let us know how it goes, and if you can't get it to work, please share some code here. At least for Slick and Lottie, what @mysterious-toddler-20573 shared will do the trick. About Piengrow, depends on how it is initialized.
  • h
    yeah normally when using js and having issues on load you need to tear down the lib and reinit it
  • h
    but generally w/ animations that would be specific to the content being animated
  • h
    I wouldn't expect any loaded data to mess with the ongoing animation if the two didn't overlap
  • s
    hey guys i am writing on a seminar for my school stuff on the topic " HTMX and React: where server side meets Front-end" . it is going to be a comparison between react and htmx and reason why a developer (python/Django) should make htmx a first port of call in a mini to a medium web project. zlink to resources will be highly appreciated
1...658659660...1146Latest