https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • h
    EG you can't use a custom swap method for the history cache restore
  • f
    just a heads up, I tried to use htmx with shoelace's form input components, none of the shoelace inputs are included in the request shoelace claims to use the 
    formdata
    event to inject its input values when you instantiate FormData with the form, htmx does seem to use FormData (explicitly stated when doing the multipart format) so I can't really tell why it's not being included https://shoelace.style/getting-started/form-controls
  • f
    I just decided to switch to missing.style to make the form look good and not use shoelace's form components, I think all the non-form stuff will work fine
  • m
    hmmm, is there some sort of script callback we can invoke when htmx loads content?
  • f
    there might be something internal to shoelace, I also forgot to try moving the order of the scripts in the
  • g
    Nerve wracking experience.
  • m
  • m
    required a new event and some small modifications to htmx, will be available in the next release
  • m
    (probably soon)
  • m
    You can preserve elements in the head by: 1 - marking them as 
    hx-preserve="true"
    2 - catching the 
    htmx:removingHeadElement
    event and calling 
    preventDefault()
    3 - annotating the new 
    head
    element with 
    hx-swap-oob="beforeend"
  • m
    We will work with this as an extension and get it just right and then merge it into htmx for htmx 2.0
  • w
    I need to specify the 
    hx-select
    for my error catching. Is it proper to set 
    event.detail.select
    as below..or more like I do 
    event.detail.target
    ? Or is it not possible to do what I want? Seems like neither way works, but I'm not sure if it's due to something else or what
    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");
      event.detail.select = "#main";
  }
});
    EDIT: Looks like maybe it's not a thing, after inspecting 
    event.detail
    . I think I'm able to get around it with some template changes, but just thought I'd post here to see.
  • m
    Following on from here https://discord.com/channels/725789699527933952/864934037381971988/1030107261185556582 , I was thinking that I'd have each domain object have a route. 
    /article/<id>/
    The default would be a full page view of it. But you could add query parameters to say, ask for the "in a list" or "compact card" view of the same data. I was trying to minimize the amount of nesting of routes. Does that sound reasonable?
  • m
    Finally, I'd have a Middleware that sees if a request is htmx initiated based on the headers, and wraps the boilerplate `head`around it if it's not. This I could do swaps on the body of a page, and have it URLs clicked on directly not be broken.
  • m
    This probably pretty basic, but I'm still trying to wrap my head around things.
  • m
    (I'd have asked in a specific channel, but I'm running Clojure, which doesn't have a subchannel yet.)
  • m
    That sounds reasonable to me
  • m
    just made #1030199982273331230
  • e
    Is it possible to use htmx to do polling, then at the end of polling, redirect and while the redirect is happening, stop polling? I tried setting 
    HX-Redirect
    and returning a response code of 
    286
    , but it seems that doesn't work. I looked at the code and I think it's because this block: https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L3010 returns before it gets to the line checking for 
    286
  • w
    My redirect using 
    HX-Location
    headers is working on my Django development server, but not in production (nginx). The Response headers still contain the HX-Location info, but it's not issuing a request (or throwing an HTMX error). How can I further debug this?
  • m
    I would load up the incompressed version of htmx and watch what's coming back
  • m
    step through the response
  • m
    easy to find "HX-Location" in the code
  • m
    Use an 
    HX-Trigger
    to trigger the redirect via some javascript you write, and add a timeout of 0 to it, so the response hander can get through the poll cancellation and then do the redirect.
  • m
    it's a hack, but it'll work
  • m
    Alternatively, convert to load-polling, which gives you the opportunity to do whatever you want on every request: https://htmx.org/docs/#load_polling
  • e
    Oh, interesting. So load polling basically leverages the 
    delay
    to do polling. When the element loads, it waits however long, then makes a new request. Then if the response re-loads the element, it'll do it again. That the idea there?
  • e
    Would you consider moving the 
    cancelPolling
    block up higher, above the other header checks? Or is there a reason for it to be after those?
  • e
  • w
    I hate npm. For some reason, even though 
    npm list
    on both servers shows 
    htmx.org@1.8.0
    , my production server is sending 1.7.0. 🤷‍♂️
1...853854855...1146Latest