Yeah no reason xD

i just wanted to fully submerge in to the htmx, was so focused 😄

Ha, you could also set

hx-boost="true"

if you're not already

Totally get it "htmx all the things"

The reason it's doing this is that without a

hx-target

it will swap itself with the new content.

@adventurous-ocean-93733 Just to understand why its still feeding the #search-results? Is it because no target is set?

@adventurous-ocean-93733 got it ❤️ much thanks!

I am so loving htmx as i my background is basic->Vb.net->python i have very little understanding of javascript and htmx is just saving my ass 😄

Hi, everyone! Sorry if this has been asked before, but how should I do login and registration forms in htmx? Currently, my login handler has a "happy path" that signs the user in and returns a redirect (/w the session cookie), and if the credentials are incorrect, it simply returns a

401: Unauthorized

with some text content.

How should I change that? What does htmx expect?

In case it’s useful there are server side example integrations here: https://htmx.org/server-examples/ I don’t know how many have auth built in. If you’re retaining your login handler then you could keep the same pattern you already have - standard html form post that either redirects on success with header, or redirects to login error.

Is there a way to perform different actions in htmx depending on the status code? For example, if the login is successful, it would do nothing and let the redirect happen, whereas if it's a 401, it would show a hidden "Incorrect email or password" paragraph or perhaps receive that paragraph as HTML and put it below the form.

hi, first message here but I guess your server should return the form with the error "incorrect email or password" (as in HTML)

I've considered that. With the templating engine (Askama) I'm currently using, that's a bit difficult, though, since the login template inherits from the base template and renders the whole page. I've asked at the library chat if it's possible to make that inheritance conditional (use it on the first render to respond with a complete page, but only render the form for error responses), but I'm waiting for answers.

htmx sends some headers in the request that your server can use to return partial instead of full page https://htmx.org/reference/#request_headers

Sure, I mean that I don't know if my templating engine allows for rendering partials when they normally inherit (i.e. they have

{% extends "base.html" %}

at the top).

Yes:

document.body.addEventListener('htmx:beforeSwap', function(evt) {
    if(evt.detail.xhr.status === 404){
        // alert the user when a 404 occurs (maybe use a nicer mechanism than alert())
        alert("Error: Could Not Find Resource");
    } else if(evt.detail.xhr.status === 422){
        // allow 422 responses to swap as we are using this as a signal that
        // a form was submitted with bad data and want to rerender with the
        // errors
        //
        // set isError to false to avoid error logging in console
        evt.detail.shouldSwap = true;
        evt.detail.isError = false;
    } else if(evt.detail.xhr.status === 418){
        // if the response code 418 (I'm a teapot) is returned, retarget the
        // content of the response to the element with the id `teapot`
        evt.detail.shouldSwap = true;        
        evt.detail.target = htmx.find("#teapot");
    }
});

From https://htmx.org/docs/#modifying_swapping_behavior_with_events

htmx won't swap with 400-level response codes by default, so code like this would turn that on and you could handle it in JS

it seems you're using jinja or nunjucks. your page

login.html

could look like this

{% extends "base.html" %}

<h1>Log in</h1>
{% include "form" %}

form.html

would look

<form>
  {% if errors %}
    <p>Incorrect password or username</p>
  {% endif %} 
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" />
</form>

now in your controller, you can check for that

HX-Request

request header and then either render

login.html

or just

form.html

Ah, yeah, I remember something like that. I'm guessing there's no way around writing JavaScript. In that case, would there be an issue if I included that below the HTML partial, inside a "local"

<script>

tag? I've gotten used to "local" JavaScript from Svelte, and it would convenient if the JS could live in the partial.

That's an idea!

I expect so, it's adding an eventlistener to the body

I need to make

value

a possible value for

hx-target

. In fact, perhaps you need to do that.

That's a good idea. That's a terrible idea.

many such cases

Beginner-ish question: I have a form which can get filled either by the user, by hand so to speak, or by a javascript functions triggered from a different part of the page. I would like an http request to be triggered when certain fields in the form get filled, regardless of how they got filled. I tried using hx-trigger="change changed delay:1200ms" but that doesn't respond to the auto-fill... Is there an hx-trigger I could use that would work here?

I would look at triggering a change event manually when you update the fields via javascript, to keep things simple

Any idea on how to do something like this with htmx or possibly hyperscript? "When any contenteditable="true" element is ctrl+clicked, make an ajax call, and put the response where the cursor is"

I would likely use hyperscript for this

lemme get a basic example going