https://htmx.org logo
Powered by
# htmx-general
  • m
    🙂 Ah, the internet. Yesterday did have some amount bad vibes, and some of that was my fault, I accept that. Today I propose for a good-vibes day to cleanse the palate.
  • m
    i enjoyed this response on twitter:
  • m
    and I expect there are many people in that boat: surprised and confused by htmx, who need some time to think
  • m
    we are, after all, a small group of contrarians and bringing contrarian news well is always a dangerous and delicate process
  • a
  • a
    ☝️ htmx rocking up into the SPA world-view on Twitter yesterday
  • b
    btw the second link on the server-examples page on node.js hits a 404: https://github.com/TomekKosakowski/express-ejs-htmx-playground
  • b
    on htmx.org
  • c
    There is obviously a slight difference between being in a discussion on a social media thread, and being in a discussion in a w3c working group meeting trying to improve a specification which will affect the lives of people ranging from student, to self-employed, to CSO at three letter agency. Both types of discussion require a certain level of composure and respect to be shown to everyone participating. Focusing, impartially, on the technology is what should lead to the best outcome for all and not on whether you like/dislike the messenger or current "Title-holder". I think all of us here agree that whatever technology makes our lives easier as developers or designers etc. we will welcome with open arms. I'm sure that 1cg won't transform into an unswerving gatekeeper if his project/s gained wide adoption and then in 2 years another compelling technology came knocking on his door.
  • m
    🙂 100% agreement, and i would certainly hope I would not gate keep. Twitter, unfortunately, is a bad medium for technical discussions, but it is where a lot of them happen. Another comment I would add, for the htmx/hyperscript community, is that it is very important to me that, as much as possible, we all be having fun. Life is short and nerd fights, while bracing, don't matter very much in the long run
  • m
    Hey, good morning everyone. Is there a class that's added while a request is in progress? I'm trying to substitute a element on the page with a loading indicator while a request is in progress and I can't find a good way to do it without tapping into the JS code. I have somethin glike this
    Copy code
    <button type="button"
  class="btn btn-sm btn-outline-secondary"
  hx-trigger="click"
  hx-swap="outerHTML"
  hx-target="#account{{ account.id }}"
  hx-indicator="#deleteindicator{{ account.id }}"
  hx-confirm="Are you sure you wish to delete your account?"
  hx-delete="{% url "google_cal_auth" account.id %}">
  {% icon "trash" height="16" width="16" %}
  Remove
</button>

<button id="deleteindicator{{ account.id }}"
  class="htmx-indicator btn btn-sm btn-outline-secondary"
  disabled
  type="button">
  <span class="spinner-border spinner-border-sm"
  role="status"
  aria-hidden="true"></span>
  Removing...
</button>
<style>
  .htmx-indicator{
    display:none;
  }
  .htmx-request.htmx-indicator{
    display:inline;
  }
</style>
  • g
    I think you're looking for 
    htmx-indicator
    -- https://htmx.org/reference/#classes
  • m
    I'm using that, but it only shows up on the element I specify with the indicator attribute right?
  • m
    I need something that's on the button that makes the request and disappears after the request is done
  • g
    Oh, yes you are. Sorry I didn't read your note thoroughly enough.
  • g
    I believe the class 
    hx-request
    is applied to the element that makes a request. Since buttons can contain sub elements, you should be able to do some magic with CSS. Would something like this work?
    Copy code
    html
<button ...>
  <span class="requesting">my spinner</span>
  <span class="regular">Remove</span>
</button>

<style>
  button .regular {display:inline;}
  button.htmx-request .regular {display:none;}
  button .requesting {display:nond;}
  button.htmx-request .requesting {display:inline;}
</style>
  • g
    This is all untested, and off the top of my head, but I think that should get you close.
  • m
    I don't see the class 
    hx-request
    being added to the element that makes a request.
  • m
    and if you meant 
    htmx-request
    , that is added to the element specified by 
    hx-indicator
  • g
    Yes, sorry. I meant htmx-request. But still, shoot. The docs say it's added to "either the element or the element specified with hx-indicator" -- it seems like it should work. I'll try to give this another look later today.
  • m
    This is the idea with the 
    htmx-request
    class and hx-indicator. Can you add it to a parent element of the button (or point it to the button itself) to achieve this? If not, we can give you a bit of javascript or hyperscript to achieve what you want.
  • g
    This works for me
    Copy code
    html
    <span id="delete-01" class="delete-button">
        <button 
            class="btn btn-sm btn-outline-secondary"
            hx-trigger="click"
            hx-swap="outerHTML"
            hx-target="#account-01"
            hx-indicator="#delete-01"
            hx-confirm="Are you sure you wish to delete your account?"
            hx-delete="/slow">
            Remove
        </button>

        <button disabled class="btn btn-sm btn-outline-secondary">
            <span class="spinner-border spinner-border-sm" role="status"></span>
            Removing...
        </button>
    </span>

    <style>
        .delete-button button:not([disabled]) {
            display:inline;
        }
        .delete-button button[disabled] {
            display:none;
        }

        .delete-button.htmx-request button:not([disabled]) {
            display:none;
        }

        .delete-button.htmx-request button[disabled] {
            display:inline;
        }
    </style>
  • g
    You may also consider doing this in hyperscript. I think it would be less code, fewer CSS styles, and fewer DOM objects.
  • g
    Copy code
    html
<h2>Hyperscript Button</h2>
<button 
    class="hyperscript-button" 
    hx-delete="" 
    hx-prompt="" 
    script="on htmx:beforeRequest add [@disabled] to me">
    <span class="regular">Remove</span>
    <span class="if-disabled">Removing...</span>
</button>

<style>
    .hyperscript-button .if-disabled {display:none;}
    .hyperscript-button[disabled] .regular{display:none;}
    .hyperscript-button[disabled] .if-disabled{display:inline;}
</style>
  • r
    I see Facebook and Harris are going hard defending their obsolete frameworks
  • m
    🙂 they are not obsolete, but then neither is hypermedia. There is room on the internet for a few different approaches.
  • g
    ah yes, the two big tech companies, Facebook and Harris
  • u
    Hello, all. Just discovered HTMX via the recent HN post. I was waiting for SvelteKit, however, I think I'm going to pass on that and spend some time with HTMX/Hyperscript. The prob I have now is reorienting the data flow model I've been working with. Previously, I used Directus for creating a JSON API. Am I correct in understanding that now I have to call an endpoint, put that JSON load into a template (handlebars) to render an html load, and then that data will be sent on to populate the html element?
  • m
    htmx would expect HTML from the server that it connects to, yes, so your JSON API would need to be transformed into HTML
  • g
    i guess there truly is no such thing as bad publicity...
1...483484485...1146Latest