https://htmx.org/attributes/hx-target/ could need a little more love and & examples :]

Hello. I have a question regarding scrolling. I have a form which uses

hx-boost

and targets another div in the page. Whenever a swap occurs, the page scrolls to the targeted div but away from the form. I want to prevent this scrolling so that the form remains in focus for the user to continue typing if desired. I read the documentation but I was unable to solve this. Any ideas? Thanks!

Forgot to mention that I tried

hx-swap="innerHTML focus-scroll:false"

but the page still scrolls.

OK an update. Instead of using hx-boost on the form, I added the htmx attributes on the

<input>

directly as in this case I was able to. And the issue is resolved.

can you give me the structure of your html? Why do you need to use

find

?

Thanks for clarifying your thoughts 😉 TBH I haven't been in the e-commerce industry for 7 years so I'm not up-to-date on he tooling. But : * About the question you asked to JAMStack users: while it's understandable that SaaS platform are becoming popular in that ecosystem, maybe your panel (basically Javascript programmers) is biased by the fact that their personal comfort ("I want to do nothing else than writing Javascript all day long, and get paid a lot for it") would be threatened by any other way of creating an e-commerce website. * About htmx for e-commerce: clearly in order to use htmx (or any other hypermedia-oriented lib) you need to be in control of the HTML and the way the HTML is served (when to serve a full page, when to serve a partial to refresh only a small part of the page). You can't just plug a middleware in front of ButterCMS API endpoints, as these endpoints don't represent the journey you want for your users (that's the whole point of separating "business logic" from "web experience" as JAMStack home page says). The hypermedia approach is all about making the server care about the "web experience", so you need to be in control of URLs, of page structure, etc. All these things that some people think should only be done on client-side. Note that obviously, going for server-side "web experience" does not prevent from offering a rich user experience (that's the point of my talk at DjangoCon Europe), and also does not prevent from separating a reusable "business logic" from a custom-tailored "web experience": e-commerce CMS tools have always worked hard that way, but as I said at the beginning I don't know the current state-of-the-art. And even if it means that your server-side front-end (yes it's front-end, as it's facing users) consumes as API, like a client-side JS app does. Just remember that even "install and maintain rails/Drupal" will always be less shitty than asking a web browser to be a rich client.

i'm trying to wrap my head around all the htmx possibilities, and just testing things out. The structure would be something like this:

I have a form that is being hx-boosted with some buttons that have no

form

or

type="submit"

attributes (they have some hyperscript on them). Should HTMX be submitting the form when they get clicked? Cause it seems like that's what's happening. EDIT: The Request Header shows it's being boosted and the trigger was

payment-form

)

<form
  id="payment-form"
  method="post"
  action="{% url 'foo' %}"
  hx-target="closest .card-body"
  hx-swap="outerHTML"
>

EDIT: Adding

type="button"

fixed it 🤷

Also I would neeed to use a class because there are multiple comment forms and lists on the page.

edit: nevermind

it will not be.

OK, so for this case, I would put the hx-target on the form and use

previous .commend-list

that seems cleaner to me for some reason

for me too, never heard of previous \o/

thanks @mysterious-toddler-20573 , have two tasks I have to deliver for work in a couple of hours yet here I am like a kid playing with htmx and having fun. work can wait.

@mysterious-toddler-20573 regarding https://discord.com/channels/725789699527933952/725789747212976259/1039090425006395392 I believe it is not the intended behavior. Should I open an issue on this?

I am looking at an app that some other people have developed so I have no idea where this is coming from - when clicking on a boosted link, I see the page open at the same position scroll wise, and then it smooth scrolls to the top of the page

That's gotta be some JS in the app right

it was htmx

htmx.config.scrollBehavior = "auto";

can you make a recording?

w/ boosted links I think we scroll to the top to mimic "normal" link clicking

smooth scrolling is maybe a bad choice

I think it needs a documentation entry at least

I can put up a pr

in this example the button is missing the type submit attribute https://htmx.org/examples/click-to-edit/

i wasn't aware it mattered, can you create a PR?

what does the html look like for htis?

type="submit" is the default for buttons.

I don't have it at hand at the moment, but I am pretty sure it is

<form method="post" hx-boost="true" hx-trigger="keyup delay:300ms" hx-target="#results">

If I replace

hx-boost

with

hx-post=""

it works at intended i.e. no scrolling.