https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • c
    you can actually use htmx and having the site work without js. Forms, links etc. You can use the presence of a header to determine if this is a regular request or an htmx request, I can't remember the exact header though.
  • b
    Yep but the HTML page still needs to use 
    <script src="/webjars/htmx.org/dist/htmx.min.js"></script>
    if we want to use htmx and this is a .... JS 😉
  • t
    One of the neat things about htmx is that you can take a boring old multi page app (read: a normal fucking website) and add arbitrary dynamic loading to it as progressive enhancement. For example, your server can look at a request made to 
    /users
    and either respond with a full page, or with just the partial html fragment of the actual list of users if it detects the request was made by htmx. That is what's meant by "your site can work without js".
  • f
    Yes, the graceful non-JS fallback
  • v
    wow these projects look cool
  • m
    in other words, you'd load a webpage that does not use javascript and append hx attributes to load a fragment/page that supports js. if js is enabled it will replace the basic component
  • m
    is that correct? Or that an extra step?
  • s
    hey. quick question
  • s
    how would you go about setting a display to none an an element in the dom after issuing an htmx request from a form
  • s
    basically it's a container that's blocking the view of my indicator
  • g
    normally the response of the form submission would be some html fragment that would set the display to none and make any other changes
  • g
    i think you're asking how to cover up a dom element (to effectively disable it and show that something is loading)?
  • g
    just while the request is in flight?
  • g
    you can use the 
    .htmx-request
    class for that, and override the CSS with display properties https://htmx.org/attributes/hx-indicator/
  • s
    @green-activity-6102 thats awesome , i think that's what i was looking for !
  • s
    @great-cartoon-12331 i was looking to change things upon request , not after which i know is a little unusual for htmx stuff
  • g
    got it, the css should work if the requesting element is the one you want to hide
  • b
    Hi
  • b
    Is there an example available about https://htmx.org/docs/#boosting as this is not clear for me what boost do or not ?
  • c
    Hello, I can't find the right JS event in order to know when 
    hx-boost
    is "done". Any clue, someone?
  • c
    boost was a little vague for me too. What it does is ignore the head tag, and replace your html body with the response body (all with ajax). the idea is that using ajax and ignoring will boost the speedyness or perceived speed or the page. I haven't tried it myself but, if a speedier load is not what you are after it doesn't really do much. boost is meant to enrich simple forms and links, if you already have hx-request and thise headers hx-boost shouldn't be used as it is redundant
  • b
    boost swaps the body innerHTML by default but that can overridden
  • b
    How can we manage an error if the data do not pass some validation criteria at the server ? Can we return such errors to an id using something like 
    hx-errors
    ?
  • g
    the server should be doing it's own validation on the submitted data irrespective of what the frontend is submitting -- never trust user submitted data. If your form is posting validation criteria then the user could have manipulated that criteria before submission to exploit your validation. validate server-side and swap the entire form using HTMX with the errors rendered inline on the fields, where applicable
  • g
    > do not pass some validation criteria at the server maybe i misunderstood this statement -- perhaps you're using the word "pass" to mean that the data validation succeeds Any case the other part of my response is the same, probably easiest to re-render the entire form (with errors inline) and swap it back into the dom using HTMX
  • t
    ☝🏻 same answer applies
  • b
    So the idea is to return the errors displayed as a bullet list by example of red text (one line per error type) after the Form tag and if the process succeeded to return a message like 
    claim id xxx created
  • b
    Rendering the whole HTML Form + errors as response could not be so easy and will need to duplicate the HTML
  • t
    that definitely sounds like a decent way to do it. you'd iterate through the errors for each form field in your server-side templating engine, printing them to a new list item for each one
  • t
    you should be able to avoid duplicating the HTML by using a template for the form on the server side and conditionally displaying things depending on the context of the request
1...871872873...1146Latest