https://htmx.org logo
Powered by
# htmx-general
  • m
    it's an 
    outerHTML
    swap, so the 
    .htmx-settling
    will be on the 
    td
    since that's the target
  • m
    try this:
    Copy code
    css
td.update_flash.htmx-settling {
  background: darkseagreen;
}

td {
  transition: all 1.2s;
}
  • m
    a plain boosted form in htmx should do the right thing, in the same manner
  • b
    What is the difference then between sending back a 303 after a form submission vs after a hx-post request? What makes the first one work and not the other? 🤔
  • m
    hx-post
    is low level htmx, it doesn't say anything about how the URL should be updated. It's up to you, the developer, to update the URL if you want to. 
    hx-boost
    on the other hand tells htmx that you want this element to "act normally" but use an ajax request. So htmx wires in a bunch of stuff (targets the body, pushes the URL, etc.) It's a higher level attribute.
  • i
    odd... The transition works on the second time I update the form data. On the first time it changes 
    class=""
    to 
    class="update_flash"
    . On the second time the form is submitted the class is already 
    update_flash
  • m
    Hmmm. Let me think this through.
  • m
    mmm, I think I see why
  • m
    don't have a delay between setting the attributes up and removing htmx-settle
  • m
    allow me a think
  • b
    @mysterious-toddler-20573 do you have an idea why it feels the request after the redirect is made by htmx instead of the browser? (htmx headers are present in the request)
  • q
    Good day! This probably has been asked a few times, but I can't find anything (maybe do not know where to look)) I want to enhance a form with htmx, but do not have access to the markup (it is auto generated with a plugin I do can't mess with). I can wrap the form with a div thought. How do I make this form do the htmx ajax thing from the API? The best answer would the working sample code or a link to it)))) Thanks!
  • m
    Can you take a look at the network tab and post screen clips of the requests?
  • m
    you should be able to put an 
    hx-boost='true'
    on an enclosing div, and the form will be set up to use an ajax request instead
  • m
  • m
    first professionally-made course on htmx I'm aware of!
  • b
    I have updated my clip so that it includes the details for the headers of all requests. Hope it is enough info for you to grasp what is happening
  • a
    In intercooler I could submit an enhanced form (
    ic-enhance="true"
    ) via Javascript (
    formElement.submit()
    ) and it would still be submitted via intercooler. The same doesn't seem to be happening when JS-submitting an htmx boosted form (i.e. normal form submit is triggered). Is that right?
  • m
    hmm, I wonder if jQuery did something special there. Were you using jQuery to call the .submit()?
  • m
    huh, looks like the headers are included in the redirected request. htmx is definitely not issuing the second request
  • m
  • m
    looking here, it looks like the handling is dependent on the response code to an extent, but it says 
    GET
    methods are unchanged
  • m
    in most situations. I guess that means that the headers are preserved.
  • m
    (it says "body lost" for non-gets)
  • m
    this issue for chrome indicates that headers, by default, are preserved across the redirect: https://github.com/whatwg/fetch/issues/609
  • a
    Yes, with something like this: 
    $( "#target" ).submit();
  • a
    Ah, but that gives me a clue.. I'll try to fire the 
    submit
    event a different way
  • m
    I recall something where the vanillaJS version of 
    .submit()
    doesn't trigger the 
    submit
    event
  • m
  • m
    javascript 🤦‍♂️
1...381382383...1146Latest