https://htmx.org logo
Powered by
# htmx-general
  • b
    Because you’re doing the 
    hx-select
    I’m assuming you’re getting the full page back from the server. Do you therefore need the select? Can’t you just let boost do its thing for the body? (Just wondering not suggesting you change what’s working.)
  • p
    In this case, I have a nav submenu which is a separate, scrollable div so I don't want it be reloaded (and scrolled back to top)
  • b
    Ah - that makes sense!
  • p
    Thanks for your help! I'm very happy with this solution actually.
  • s
    I'm super new to htmx, but excited. I want my pages to fully support deeplinking. So with an example like 'tabs' (https://htmx.org/examples/tabs-hateoas/) how could I update the URL at the same time so the user could bookmark/deeplink to the opened tab?
  • b
    Use 
    hx-push-url="true"
    . (https://htmx.org/docs/#history)
  • s
    Thanks! That gives me exactly what I was looking for.
  • w
    Looking for a way to include the 
    detail
    parameter from a custom event as payload to the server when either calling 
    htmx.trigger()
    or sending an HX-Trigger header in the Response of a previous request. If we just focus on client-side for now: in the documentation https://htmx.org/api/#trigger we are sending 
    detail
    of 
    {answer:42}
    as the third arg. But I cannot find a way to send that detail up to the server when the 
    hx-trigger="myEvent"
    is called on 
    id="tab2"
    element (per the example). Best I can do so far is to use an Alpine method to create an 
    {answer:42}
    object and then JSON.stringify that object and add it as an 
    hx-vals
    attribute to the tab2 element prior to calling 
    htmx.trigger('#tab2','myEvent')
    . That works. But if we're able to send the detail {answer:42} in the event trigger, how do we handle that detail message in the element prior to the get/post being sent to the server?
  • r
  • r
    dis guy.
  • r
    PHP, JS, HTML, CSS, all vanilla, no frameworks except jQuery on all sites, no exceptions, no template lang, handwritten by me
  • r
    the crazy jquery / php man is back
  • c
    do you know if it's possible to use nested sortablejs with htmx? i can sort within a nested list or between the parent lists but I can't find a way to move items from one sublist to another
  • c
    example code:
    Copy code
    <form hx-post="." hx-trigger="end">
  <ul class="list list-group">
    <li class="list-group-item">A
      <input type="hidden" name="letter" value="A">
      <ul class="list list-group">
        <li class="list-group-item list n1"><input type="hidden" name="number" value="1">1</li>
        <li class="list-group-item list n1"><input type="hidden" name="number" value="2">2</li>
      </ul>
    </li>
    <li class="list list-group-item">B
      <input type="hidden" name="letter" value="B">
      <ul class="list-group">
        <li class="list-group-item list n1"><input type="hidden" name="number" value="3">3</li>
        <li class="list-group-item list n1"><input type="hidden" name="number" value="4">4</li>
      </ul>
    </li>
  </ul>
</form>
<script>
htmx.onLoad(function(content) {
    var elements = document.getElementsByClassName('list');

    for (var i = 0; i < elements.length; i++) {
        new Sortable(elements[i], {
        group: 'nested',
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65
      });
    }
  })
</script>
  • c
    If, for example, I move number 1 to list B
  • c
    I get a request with these parameters:
    Copy code
    letter: A
letter: B
number: 1
number: 3
number: 2
number: 4
  • m
    Hi folks - I'm using HTMX with Rust Actix for an app and can't get the HX-Trigger with a custom event from header to work. I have a page with a searchable summary that is updated based on changes to a variable number of text fields on the page. When any one of these fields is updated, I re-generate the summary and send a custom event through the response header. I've set 
    hx-trigger
    for the summary to 
    hx-trigger="textUpdate from:body"
    and the handler for text_update generates a header like this:
    Copy code
    rust
HttpResponse::Ok()
            .header("HX-Trigger", "textUpdate")
            .body(rendered)
    but the update isn't getting triggered at all. Any idea what I might be doing wrong? Thank you!
  • r
    btw @many-lizard-89013 you may be interested in the #937504709449764944 channel as well.
  • m
    Can you take a look at the response in the browser tools and make sure it’s what you expect? Also worth adding a javascript listener on the body for that event to see if it’s being triggered or not. Finally you can debug htmx itself: the spot where we trigger based on that header is pretty obvious.
  • m
    Thanks - will have a look through. The initial check wasn't showing a header for the response. New to HTMX and not really a front-end guy, so this is probably a lack of knowledge on my part.
  • h
    I had some old oob code -
    Copy code
    <div hx-swap-oob="beforeend:#messages" class="green">
    <div> some content </div>
  </div>
  • h
    and when it's inserting the oob element I"m seeing it JUST include 
    <div> some content </div>
  • h
    no wrapper div
  • h
    was it always that way?
  • h
    and I just had a bug?
  • m
    Update: got it working. HTMX wasn't picking up the event on its own for some reason, but when I added in the JS eventListener, it triggered and the functions returned the update from the server. Thank you!
  • h
    Hey all I'm new here. Just quickly, any plans to add a 'rules' or 'start here' or equivalent for the discord? Don't want to step on any toes as I know most of us are not paid to be here
  • h
    (including myself lol)
  • r
    is it justifyable to add a gate? I never see spam bots come in here. I admire servers that do not have gates, boom, right into general chat where you need to be.
  • h
    Might be nice for newbies to have a jumping off point or FAQs as it grows, but if everyone's happy rn then I have no problems !
1...656657658...1146Latest