https://htmx.org logo
Powered by
# htmx-general
  • c
    learning htmx and need some help, I'm trying to send all the html content of an id to a handler, how do I make hx-post do it?
  • c
    don't want to swap anything, just send the actual content to my handler.
  • c
    hx-vals="javascript: editable:htmx.find('#template-container').innerHTML"
  • c
    Hi people! Been learning htmx, and have a question. Is it possible to bind a click event for a button within a template, so that new content generated via the template has the button clickable for each item. Template code: 
    <template id="foo">{{#.}}<li>{{title}} <button data-id="{{id}}">edit</button></li>{{/.}}</template>
    . Now how do I make the button clickable via htmx (instead of using native JS's 
    onclick
    event)?
  • w
    you would add the 
    hx-trigger="click"
    attribute to the button in the template. https://htmx.org/docs/#triggers Maybe I'm missing something from your question?
  • c
    Thanks, isn't 
    hx-trigger
    for AJAX requests only? I'm trying to make the click execute some JS instead.
  • c
    Basically, I want the button click to set the value of an input textbox with the clicked row's title text.
  • w
    you're correct. 
    hx-trigger
    would normally kick off an HTMX request to the server. For what you're trying to do, perhaps something like Alpine.js may be more of what you're looking for? FWIW, that's what I use for dealing with element click events in client code and it supports templating natively just like what you're describing...
  • c
    I like the simplicity of htmx, and want to use it for now, so perhaps I'll just use the JS 
    onclick
    on the button instead of an htmx method. There's 
    htmx.on()
    but it doesn't bind to new DOM content.
  • w
    I love the simplicity of htmx as well! it's like having a super-simple super-power. you'll find it's very purpose built, but what you're trying to do may not be one of those purposes.
  • a
    I can't get htmx to work inside my django forms
  • a
    What's the best way to get inside the django forms? I found Widget Tweaks, is that the right idea?
  • a
    or
  • a
    can anyone tell me why this:
  • a
    Copy code
    {% render_field league_form.mtgFormat name="leagueformat" class="form-control" hx-trigger="change, load" hx-post="/account/enable" hx-target="#myDeck" %}
  • a
    which outputs this:
  • a
    Copy code
    <select class="form-control" hx-post="/leagues/formatdecks" hx-target="#myDeck" hx-trigger="change, load" id="id_mtgFormat" name="leagueformat" required="">
  • a
    doesn't work?
  • a
    specifically there never is any post request, not on load or change.
  • t
    htmx has one job, and that job is to do ajax requests and content swaps. For client-side interaction, try looking at hyperscript.
  • s
    @mysterious-toddler-20573 I am not sure if any thing fishy where in if I float the button in partial using classes on button the UI is sort of broke (meaning button will not be clickable) but at end of partial if I add class using script tag and htmx.addClass the UI behavior is as expected. so point is hope htmx swap with float is confirmed to be fine.
  • m
    that looks normal to me, is other htmx functionality working? Maybe add a simple div w/ just a 
    hx-trigger="load"
    and 
    hx-post="/leagues/formdeck"
    to it to make sure things are plugged in?
  • m
    I thought this server side builder by @ripe-action-67367 was an interesting approach: https://discord.com/channels/725789699527933952/963040198390861875/987997022806245388
  • m
  • b
    Yes that's exactly it, except there @ripe-action-67367 has hardcoded packing up the OOB stuff in each API call. Instead of that, imagine a middleware for the entire API that calls .WithOob with whatever you specify in the query string. You move the choice to the frontend, and reduce coupling/specificity across the API impl
  • a
    yes that works. And I have other htmx on the same page working. Just can't get the one inside the django form working.
  • m
    huh
  • m
    is there any other javascript flying around?
  • m
    I wonder if they are somehow swallowing the events
  • a
    no, this is a new project.
1...711712713...1146Latest