https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • f
    I am starting to use htmx; trying to send a post request on button click. The button is not included in a form, but I want it to send post data, lets say, id = 428
  • f
    Here is the button code, but it sends nothing:
  • f
    What am I doing wrong?
  • a
    hx-include
    is a css selector for a form element. Maybe you are looking for 
    hx-vals
    https://htmx.org/attributes/hx-vals/
  • f
    Thanks @adventurous-ocean-93733 . Trying this code, but still it does not work:
  • f
    The Request tab in Firefox Developer tools for this request is empty and I do not get any post data on the server...
  • f
    for now, I am simply transmitting all the needed data in the url, as you can see...
  • f
    oh, I am having this error in the Console: SyntaxError: JSON.parse: expected property name or '}' at line 1 column 2 of the JSON data ...
  • f
    so it is quote style that is wrong, I presume; will have to change that, but cannot at present, since the button currently is generated by php code and will only use outer double quotes...
  • a
    Yes it’s strict JSON so must be hx-vals='{"myVal": "My Value"}'
  • a
    But maybe you could also try escaping it? Or prefix if with 
    js:
    as per example at https://htmx.org/attributes/hx-vals/
  • f
    Oh, thanks, prefixing it with js: helped!
  • f
    finally I am getting post requests to work!
  • r
    Awesome!
  • b
    https://changelog.com/podcast/521 Rails-specific but this is someone preaching the Hypermedia Gospel. @mysterious-toddler-20573 probably needs to point him at the book
  • r
    Awesome episode
  • s
    Hi guys, i seem to have forgotten how to scroll to the top of the page after a form is submitted with HTMX?
  • s
    Found it: 
    hx-swap="outerHTML show:#body-div:top"
  • s
    All the links on my webpage are hx-boosted 
    <body hx-boost="true">
    . The links look like this: 
    <a href="/orders" hx-target="#main_content">
    Whenever i click a link, and view the pagesource of that link in chrome, i only see what is inside main_content. The , footers, and everything that is not inside main_content is not there, everything on the fronted is good still. Is this normal behaviour?
  • r
    What is the 
    hx-indicator
    usually used for?
  • s
    showing loading icons
  • s
    the indicator will be shown until the request is not completed
  • r
    And the indicator will show in the 
    hx-target
    ?
  • s
    Copy code
    <div>
    <button hx-post="/example" hx-indicator="#spinner">
        Post It!
    </button>
    <img  id="spinner" class="htmx-indicator" src="/img/bars.svg"/>
</div>
  • s
    here for example
  • s
    the img will be only visible while the request is not completed
  • r
    Ah okay. I'll have to try it out.
  • r
    Thank you
  • l
    Looks good. This is my first time seeing Thymeleaf templates, so that took me a bit to get, but I see where you're doing inline edits, templates to replace table rows, etc. 🙂
  • l
    That is exactly the behavior you'd expect. You don't have to replace the whole page; htmx replaces 
    #main_content
    for you, making the network payload smaller, and keeping the page from having to reload styles / scripts / fonts / etc. 🙂
1...974975976...1146Latest