https://htmx.org logo
Powered by
# htmx-general
  • m
    lmao
  • m
    "Who are you?"
  • m
    "A lunatic in montana. And a turk. Still in college."
  • p
    Hi everyone -- so I'm basically obsessed with HTMX now and ready to jump ship from my beloved SvelteKit. But I'm still not sure about some of the basic, high-level stuff. Like... If I have a list of things in the sidebar, click one to load that content in the main pane, that all seems fine. But what if the request I sent was for a restricted route and my session expired or whatever. How does my front-end handle the 401 error?
  • m
  • m
    we try to fire a boat load of events and allow you to hook in and modify behaviors at sensible points
  • m
    you can also trigger custom events using response headers
  • m
  • m
    and you can have htmx-powered elements respond to those events via 
    hx-trigger
    or use something like alpine, vanilla js, jquery or even #796428329531605032 if you are very brave
  • p
    Thanks so much! That's exactly what I needed to know!
  • m
    🙂 glad to help, and I hope you find htmx useful
  • p
    Okay here's another super noob question. I submit a form to "add an item". On success I want to redirect to show my list of items (with new one added). On failure, I want to stay on the same page and show errors. What's the "right" way to do this? Do I need to set up event listeners as described above or is there a more HTMX-ey way of doing it?
  • p
    If anyone knows of a "basic guide to common CRUD patterns with HTMX" -- I'd love to read it!
  • m
    I would have the default target of the request be the form, and rerender the errors if needed, on success I would use the 
    HX-Retarget
    and 
    HX-Push
    response headers to display the new content in the main area of the app and push the URL of the new resource.
  • m
  • c
    Guys, I'm missing something basic:
    Copy code
    <div hx-trigger="click" hx-post="/addsettoinv" hx-swap="outerHTML" name="test" value="val1" >CLICK ON ME</div>
    In Flask I want to return the value: val1 What should be my code: I tried
    Copy code
    print(f"{request.form.get('val1')=}")
print(f"{request.args.get('val1')=}")
    I do not get it
  • c
    I tried the same as above with a button, and still does not get any value returned
  • f
    @careful-waiter-81326 You may need this: https://htmx.org/attributes/hx-vals/
  • c
    But I'm looking at this example:

    https://www.youtube.com/watch?v=zYs42XcpHYI▾

    and the guys is simply doing a
    Copy code
    flask.request.args.get("bt1")
  • m
    Aye—in the example, though, 
    name
    and 
    value
    are attributes of native HTML “input” elements, and are being serialized automatically by virtue of it being within a form. A 
    div
    isn't treated the same, just because it has the same attributes.
  • m
    Thus, Yahya's suggestion to use 
    hx-vals
    to simulate the same behavior 😉
  • m
  • c
    August I try with a button same issue
  • c
    Copy code
    <button name="bt1" value="test1" hx-get="/addsettoinv" hx-target="#ret1" >
    Add in my Inventory
</button>
  • c
    Copy code
    @app.route("/addsettoinv", methods=['GET'])
def addsettoinv():
    print("ADD SET INV")
    #print(f"{flask.request.args.get('bt1')=}")
    #print(f"{flask.request.args.get('val1')=}")
    print(request.get_data())
    print(request.data)
    print(request.args.get("bt1"))
    print(request.args.get("val1"))
    print(request.args.get("test1"))
    return 'test'
  • c
    here is the output:
    Copy code
    192.168.1.100 - - [05/Apr/2022 20:45:48] "GET /addsettoinv HTTP/1.1" 200 -
ADD SET INV
b''
b''
None
None
postvars={}
  • c
    it is always blank
  • c
    if you look at the code, of the youtube video above, there is no form, it is just a
  • m
    Hmm… I think it still falls under the general "native inputs with a value attribute" umbrella; htmx excludes 
    button
    elements, for some reason (parity with jQuery? source comments are unclear)
  • m
    If you try 
    hx-vals
    as Yahya suggested, I think you'll get there!
1...627628629...1146Latest