https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    \> using hypermedia as the engine of application state an idea so crazy... it just might work!
  • f
  • w
    Any suggestions for how to debug some post-swap scrolling behavior? I have a multi-part form and when the second form is loaded (via 
    hx-get
    ), the screen scrolls down a bit. I don't have 
    show:
    or 
    scroll:
    set on the element (or parents), and even when I add 
    scroll:window:top
    to the 
    hw-swap
    it still happens. I thought it was related to the first form field having 
    autofocus
    , but I disabled that and it still does it. EDIT: I also checked 
    htmx.config.defaultFocusScroll
    in the console and it's 
    false
  • l
    I don't think it has anything to do with bravery or audacity (or reproductive organs). If a browser would render with htmx behavior when it sees that DTD, it would be an elegant way to write pages. Absent that, though, it would probably fall back into quirks mode, which would make the experience worse (at least for the developer).
  • t
    well, the backup is XHTML5
  • s
    Hi guys, i use HTMX with bootstrap Modals this way:
    Copy code
    const modal = new bootstrap.Modal(document.getElementById('generic_modal_placeholder'))

htmx.on('htmx:beforeSwap', (event) => {
    if (event.detail.target.id == 'main_content') {
        modal.hide()
    }
})
    This works fine but sometimes the target of the request is not "main_content". Is there a way to add in the response, something to tell HTMX to close the modal. Example:
    Copy code
    if (event.detail.close_modal == "True") {
    modal.hide()
}
    Is there a way to piggy back data from the backend, so that the event handler can pick it up?
  • m
    you could use the 
    HX-Trigger
    response header to trigger and event (e.g. 
    closeModal
    ) and then listen for that event and call modal.hide()
  • s
    Thank you for your answer 👍 , was able to make it work with Django like this: Backend:
    Copy code
    response = render(request, "product_cost.html", {"product": product})
response.headers["HX-Trigger"] = "close_modal"
return response
    Frontend/JS:
    Copy code
    document.body.addEventListener("close_modal", function(evt){
    modal.hide()
    modal_lg.hide()
})
  • m
    🙂 nice and tidy
  • s
    Indeed, the HTMX way
  • w
    I'm trying to figure out how to best do 404s so that 1) a partial is loaded via HTMX if the 404 occurs due to a HTMX response and 2) the whole template is loaded if done by a "cold" request. I have this in my js, but my issue is that I would like to specify the equivalent of 
    hx-select="#main"
    and I don't think there's a way to do that here. Currently my 404 template is just a fragment (e.g., only contains #main), and it works nice with HTMX but when I cold load a 404, I don't get any styles, etc bc the 
    <head>
    and nav etc are not included in the 404 template. Thoughts?
    Copy code
    document.addEventListener("htmx:beforeSwap", (event) => {
    switch (event.detail.xhr.status) {
      case 403:
      case 404:
      case 500:
        event.detail.shouldSwap = true;
        event.detail.isError = false;
        event.detail.target = htmx.find("#main");
    }
  });
    EDIT: I don't know why I asked this, I just have to make my 404 template conditionally extend my base template, the same way I do every other template 🙄 Braindead today.
  • m
    I've just been editing a form and 
    hx-include
    works with Shoelace elements if you start the selectors with id's. E.g. 
    hx-include="#myform sl-input, #myform sl-checkbox, #myform sl-rating"
    It doesn't work with 
    find
    though. E.g. 
    hx-include="find sl-input, find sl-checkbox, find sl-rating
    will only find the 
    sl-input
    , not the checkbox and rating, like what you found in your tests. I hope that helps.
  • a
    Hi All, Is there any way of changing headers in hx-post request? Content-Type: application/x-www-form-urlencoded
  • a
    API endpoint only supports JSON :/
  • r
  • a
    Sweeeet!!!
  • a
    you just want to change the headers?
  • a
    oh, also change the encoding
  • w
    I trigger a refresh of my navbar (bootstrap) via HTMX when users log in / out. It seems that this navbar refresh "interferes" somehow with the Boostrap Collapse plugin, since once the navbar has been refreshed, clicking on a link in the mobile menu no longer causes the mobile menu to hide (works fine on initial load or full refresh). My understanding is that I need to somehow tell Bootstrap to "reprocess" the nodes with 
    data-bs-toggle="collapse"
    . Any suggestions?
  • e
    I may be following antipatterns, but I have entirely replaced the Bootstrap js with Hyperscript. If I'm going to have Hyperscript, I figure I might as well use it to toggle 
    .show
    (and other things).
  • w
    Yeah, I'm thinking BS js is going to be the next thing I ditch. Do you happen to have any common behaviors you use to replicate the functionality, or is your implementation more of a case by case basis ?
  • m
    Are you sure this is working? I've got the following snippet:
    Copy code
    <form id="myform" hx-include="#myform sl-checkbox" hx-target="#target" hx-post="/endpoint">
  <sl-checkbox checked>Check me</sl-checkbox>
  <sl-button type="submit">Submit me</sl-button>
</form>
    and this sends no data in the request to 
    /endpoint
    . Am I doing something incredibly dumb?
  • m
    Sort of. You've stumbled across one of my most common errors, and one of my most voted up Stack Overflow answers. Only fields with a name attribute set will be submitted with a form submission.
  • m
    Adding 
    name="my-checkbox"
    to the 
    sl-checkbox
    (and the button, for that matter) doesn't seem to change anything, though your point is well taken, there should have been a name on there.
  • m
    It's working for 
    sl-input
    as usual, just not 
    sl-checkbox
    or anything like that. 
    name
    obviously required.
  • s
    (Screenshot from Shoelace manual)
  • s
    I think you could do it but you need to approach sl- elements as if they are non- elements. Like divs or something. I don't see much value in Shoelace from what i read. It's just another component framework, very much like Bootstrap... so I would gladly use vanilla html. But that's just me 🙂
  • s
    the other way to use it might be to write an htmx plugin to address the non-standard elements...
  • m
    Yep, I saw that, which is why I was surprised to see that someone had it “just working”. I’m not a front end dev by any stretch of the imagination (which is why Htmx is appealing), so having a set of components I can just plug in is useful.
  • m
    This is the weirdest thing. I'm making a jsfiddle (https://jsfiddle.net/g6v31bjw/2/) and it's not working 😆 . In my live site I'm using hx-include to add sl-input, sl-range, sl-radio-group, and sl-textarea, and they all work. In the fiddle only sl-input is working, and sl-checkbox only works if I add a 
    value
    attribute 🤷
1...930931932...1146Latest