https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
  • g
    🤩
  • g
    I'd missed what hyperscript was ... unbelievable ... so good.
  • g
    Hey all you smart people. I am working on a chat messaging project that uses HTMX over a websocket.
  • g
    I'm having trouble with adding a typing indication. Basically, I need to use hx-swap-oob to add an element for each user when they start typing.
  • g
    I'm sending this over the websocket on every keypress: `` {{typing_user.username}} `` I'm using hyperscript to remove the indicator after 10 seconds. The problem is, multiple typing indicators will come up for the same user.
  • g
    I need to somehow add the element #typing-indicator-{{typing_user.id}} within the #msg-area-currently-typing only if it doesn't already exist. If it does already exist, I need to replace it so the hyperscript counter resets.
  • t
    That 
    swap-oop="beforeend"
    just sounds wrong to me
  • t
    Put the oob swap on the actual indicator maybe?
  • g
    I could do that if it was a 1-1 conversation, but it's a group chat with multiple people. There might be 1,2,3+ users typing at one time. There isn't an existing #id for each user that could possibly be typing
  • t
    What's 
    typing_user.id
    then?
  • t
    oh
  • t
    I think I get ya
  • t
    Try adding it there as well as the one on the parent
  • t
    Not super sure if that works, but it's one of those things that sounds like it might
  • s
    hi everyone! I am trying to stop an out of band swap in the presence of a specific header in the response, but I am not being able to find the xhr property in the events detail property:
    Copy code
    <script>
htmx.defineExtension('exclude-from-oob-swap', {
     onEvent: function (name, evt) {
           if(name === "htmx:oobBeforeSwap"){
               console.log(name);
               console.log(evt.detail);
               console.log(evt.detail.xhr);
               console.log(evt.xhr);
           }
     }
});
</script>
    Am I approaching something the wrong way?? Thanks for further answers!
  • m
    detail.xhr should be in that event
  • s
    as an argument of the anonymous function??
  • s
    or under evt.detail.xhr? (my initial thought!)
  • m
    yes, under evt.detail.xhr
  • m
    what is it printing out?
  • s
    added a console log arguments() right after name
  • s
    not sure if worth mentioning, the extension is placed on the element with the hx-swap-oob
  • s
  • s
  • s
    but not sure tbh ._.
  • s
    managed to come up with this:
    Copy code
    htmx.defineExtension('exclude-from-oob-swap', {
            onEvent: function (name, evt) {
                if (name === "htmx:oobBeforeSwap") {
                    var xhr = evt.detail.xhr;
                    var stop = xhr.getResponseHeader('hx-stop-oob') === "true";
                    if(stop){
                        evt.detail.shouldSwap = false;
                    }
                }
            }
});
    but it stops the actual swap that should append the content, altogether with the oob swap ._.
  • s
    Copy code
    <div hx-swap-oob="true"
     hx-ext="exclude-from-oob-swap"
     class="list-parent"
     class="uk-container uk-margin-large-bottom"
        <ul class="list">
                <li class="list-item">
                   <!-- if (this is not the last page of items) -->
                        <span class="uk-width-1-1 trigger"
                              hx-get="/page2"
                              hx-trigger="revealed"
                              hx-indicator="#spinner"
                              hx-target=".list-parent .list-item:last-child"
                              hx-select=".list-parent .list-item"
                              hx-vals='{"infinite-loader": "true"}'
                              hx-swap="afterend">
                        </span>
                  <!-- end if -->
                </li>
        </ul>
    
      <div id="spinner" class="htmx-indicator uk-text-center"></div>
</div>
  • s
    Here's a sample of the markup where the trick lies in the nested hx-get within the hx-swap-oob marked element. Normally, without the extension the issue is that the oob-swap overwrites the initial hx-swap from the nested span. If I remove the hx-oob-swap it just works as expected and keeps adding the list items to the list, but of course the oob-swap doesn't work. This breaks a search form within the same page that assumes that the results will get oob-swapped. Maybe I should rethink how that works ? I like using oob-swap for form results since I can have multiple form controls (for example, desktop and mobile versions of filters, as completely separate markup), and it just magically works, until now lol
  • s
    I thought of hx-sync too but i think it doesn't work with hx-swap-oob??
1...835836837...1146Latest