https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • a
    Copy code
    <form hx-post="{% url 'inventory:inventory_device_validation_state' %}" hx-trigger="click">
                                        {% csrf_token %}
                                        <div class="form-check form-switch">
                                            {% if not device.validation_ready_state %}
                                            <input class="form-check-input" name="validation_state" type="checkbox" value="{{ device.id }}-1" role="switch">
                                            {% else %}
                                            <input class="form-check-input" name="validation_state" type="checkbox" value="{{ device.id }}-0" role="switch" checked>
                                            {% endif %}
                                        </div>
                                    </form>
  • a
    what's interesting is that if i click on the toggled switch x number of times it eventually works :S
  • b
    Why not js:// ?
  • p
    @mysterious-toddler-20573, do you want me to open a GitHub issue for this?
  • l
    That was the reason behind my up-front caveat; if you've never dealt with them before, checkboxes don't POST the way you'd think they would. 🙂 Take a look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/checkbox#value and read their description at the bottom of the "Value" section (just above the "Additional Attributes" heading). So, server-side, instead of checking for true/false, yes/no, etc., you'll check for "on" or None. Another gotcha with clicking, which may be what you're describing, is that sometimes the event fires before the state change occurs. In other words, if there's an unchecked box that you click, in an 
    onClick
    event handler, looking up that element's 
    checked
    attribute will return 
    false
    . They aren't as intuitive as we would think they should be! As you noted, if you click it enough, you do end up getting the toggle behavior, but I would bet that if you were to query the state of that checkbox, it would be the opposite of what you expected.
  • l
    I wish I had better news - but, the good part is that it's consistently strange. So, if you can interrogate the values on the server, based on the state when you clicked, you can adjust the server's expectations, and take action/return content accordingly. Just know that it's not you going crazy, it's the implementation of HTML and JavaScript that's doing it!
  • m
    sure, that would b e good
  • m
    agree, should be 
    js://
  • o
    Why not 
    javascript:
    , like for anchor tags, or would that be too confusing?
  • g
    no
  • a
    I'd vote that only valid URI schemes should be used like this https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml
  • a
    And 
    js://
    isn't a valid URI scheme
    g
    b
    • 3
    • 6
  • m
    ah, yeah, I thought 
    js://
    was the valid URI scheme, but we should do what the standard & HTML supports
  • b
    Probably a stupid question, but why is HTML not called HMML?
  • b
    cause it is text?
  • b
    not stupid question at all
  • b
    What is hypermedia then?
  • s
    Thanks for the reply, i added "" to the head, but still have the same issue. I recorded the issue, when the main_content gets replaced, the scroll is still on the bottom, and then the scrolltop is triggered but too late or something
  • b
    hmmm
  • b
    I will defer to @mysterious-toddler-20573 for a proper answer
  • s
    @hundreds-cartoon-20446 Oh but with
    Copy code
    htmx.on('htmx:beforeSwap', (event) => {
        if (event.detail.target.id == 'main_content') {
            htmx.config.scrollBehavior = 'auto';
            htmx.config.defaultSettleDelay = 0;
        }
    })
    It does work! Thanks!!
  • m
  • m
    hypertext is a type of hypermedia, and HTML is a specific hypertext, but other hypermedia types can participate in a hypermedia system (e.g. an image with clickable regions, a video that allows non-linear branching, etc.)
  • s
    Whats the point of having defaultSettleDelay defaulting to 20?
  • m
    it allows CSS transitions to occur
  • o
    Does the hx-ws extension/htmx support several swaps in a single request? As in, how would htmx react if this was the request response?
    Copy code
    html
<div id="element1"><p>I'm new content</p></div>
<img id="image1" src="/path_to/newimage.png">
  • b
    use hx-swap-oob: e.g.:
  • b
    @orange-umbrella-16693 are you doing a chat app?
  • o
    No, but something with similar functionality
  • o
    Wanted to see if I could rewrite my site - which is basically a live-updated table, via websockets - to htmx
1...978979980...1146Latest