Basically seeing what the process is to break out of the targeted div and redirect the whole page.

looks like maybe a HX-Redirect in the headers would do it?

sounds like maybe doing an

HX-Retarget:body

with an

HX-Push

would work

no need to redirect

where would I Put that retarget, in the headers?

i'm looking for something in the docs.

yep

headers: https://htmx.org/reference/#response_headers

Thanks, i'll check it out!

I'm trying to enhance a form that uses the Bootstrap Validation approach like this one: https://getbootstrap.com/docs/5.1/forms/validation/?#custom-styles In that example, a field marked as invalid turns valid as soon as I fill in a valid value. And I'm being prevented from submitting the form if not everything is valid. Of course I do validation on the server-side https://getbootstrap.com/docs/5.1/forms/validation/?#server-side and add the appropiate classes

is-invalid

if the server rejects a field. Now I read the section about validation https://htmx.org/docs/#validation but I have no clue how to hook into the native validation and prevent submission. I read here on the chat that the HTMX way would be to submit the form and deal with the server response. I could live with that as well, but I can't modify the formfield html and I want the "realtime" validation/visual feedback if a field is filled correctly. How do I approach this? Is it even possible?

What would be a good example?

what kind of javascript do you have right now

can you use a framework? does it need to be vanilla?

fundamentally if you want to do client side validation you're going to need to write some javascript

speaking of validation I was sort of thinking a good extension might be form validation w/ https://github.com/jquense/yup

idk what the display/error side of that looks like but it seems easy to say form data -> object -> yup -> validates -> fires htmx event

Finally with little bit of customization of Spring security (which turned out to be super simple given how spring is so extensible) i have managed to solve this problem very elegantly. Now ajax/htmx request where session has already expired is gracefully redirected with message to login again. On login the user is taken back to the current url and not the ajax url. Anyone looking for a solution or willing to review feel free to ping me.

Right now I'm using exactly this: https://getbootstrap.com/docs/5.1/forms/validation/?#custom-styles

js
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()

So I'm happy to add some JS, just not directly to the formfields (like in the HTMX/Hyperscript example) I wonder if this:

form.addEventListener('submit'

should be something like

htmx:beforeRequest

? I can't wrap my head around it yet. A reason why this is useful (validate clientside first) is, if I upload a 10 MB file, I don't want the form coming back from the server with a field error and then have to upload that file again. Does that make sense?

Can I also make a request/potentially an easy thing to do if we ever switch to typescript - I think we could benefit from a type check around a context object

yeah there's lots of cases for clientside validation - it makes perfect sense why you'd want to have something in place to do it

@User so what are you tring to change with that? Right now all you're doing is calling checkValidity, which a normal submit will do as well?

I think you can get what you want without needing anything from htmx

htmx won't attempt to submit an invalid form

how can i update a table cell color where i clicked to trigger an event. i have a table where a td on click shows some more data, i want to hightlight the clicked cell ? what is the way to do in htmx

@User not sure if just htmx can do that.... but hyperscript can!

on click toggle .highlight on target

in some parent element

Thanks for the guidance. i will try and see how it goes

Good day! I am trying to make the whole site work without page reload. I am using hx-boost for that. It works, but there is a problem with js in loaded pages. I've seen this https://htmx.org/docs/#3rd-party. But I wonder if there is a more detailed guide (or several posts, or something) that describes how can one transition a site from being a MPA to HDA with hx-boost enabled page changes and lot of custom js to be rewritten/adapted to the new way. 1. I've read about Unpoly compilers: https://unpoly.com/up.compiler. They offer a way for js to run both on initial page load and on fragment load. How do I do that in htmx? 2. Unpoly compilers say they cleaning up after the elements leave the DOM. How do I do it with htmx? 3. I do not know if unpoly auto-initializes all the unpoly stuff in laded fragments, but that is actually needed. How to do it in htmx for all loaded stuff, so hx-boost works flawlessly? 4. What is the best way to update parts of markup (like nav, language switchers and etc) that are not swapped directly? Oob seem to require changes in markup. Unpoly has https://unpoly.com/up.feedback. This type of guide would be great for extending docs, or could form a great article) Please share your knowledge on this.

_="on click remove .table-primary from then add .table-primary to the closest parent " worked

Hey, I'm trying to set up the HTMX project on my local machine and run the test suite. I can't see the hx-indicator tests being ran. I followed the README and tests are being run, but when I search for the section of the hx-indicator attribute it doesn't show up at all in the localhost:8000/test/index.html