Can you easily achieve fade out/fade in page transition in HTMX? I looked at the examples, but struggling with how to achive this with django redirect. I'm boosting the body tag. See my button below. I would like the current page to fade out and my login page (where you are redirected) fade in. Is this possible? {% if user.is_authenticated %} <a href="{% url 'logout' %}" hx-post="{% url 'logout' %}" hx-target="body" hx-push-url="true" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' class="button is-primary">Logout {% endif %} i

So thats a good way of thinking. I am new to this

htmx

land.. ( I have a background in `react`/`typescript` + `svelte`/`typescript` ) I was doing username checkup in real time. For example a user can check if the username is taken up by other users during sign up process. But in any case i have found out a way ( thanks :D )

I have another problem...

html
{% extends 'user/base.html' %}
<!--prettier-ignore-->
{% block title %} Sign Up {% endblock title %}
<!--prettier-ignore-->
{% load crispy_forms_tags static %}


{% block form %}

<form method="post" action="{% url 'signup_view' %}">
    <div class="flex justify-center mb-10">
        <div class="font-bold text-4xl select-none flex">
            <span class="inline-flex text-white">c</span>
            <span class="inline-flex text-warning">o</span>
            <span class="inline-flex text-white">r</span>
            <span class="inline-flex text-white">e</span>
             
            <span class="inline-flex text-info">p</span>
            <span class="inline-flex text-info">r</span>
            <span class="inline-flex text-info">o</span>
            <span class="inline-flex text-info">j</span>
            <span class="inline-flex text-info">e</span>
            <span class="inline-flex text-info">c</span>
            <span class="inline-flex text-info">t</span>
        </div>
    </div>
    <div class="grid gap-6">
        {% crispy form %}
        <div class="flex justify-center items-center gap-2">
            <button
                class="btn btn-secondary font-bold text-black"
                type="submit"
            >
                Register
            </button>
            or
            <a class="underline" href="{% url 'login_view' %}" hx-boost="true"
                >login</a
            >
        </div>
    </div>
</form>

<!--This is the problem code block-->

<script>
    let el = document.querySelector('#id_username');

    el.addEventListener('input', async () => {
    });
</script>

{% endblock %}

i get this error

Is it possible to ignore a block of code that has a event listener ( except moving it to head | because in

htmx

2.0.0

i will face this issue again ) Maybe clear out the JS stack somehow ? --- Python code used for rendering :

python
#forms.py

class RegisterForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(
            attrs={
                "placeholder": "Username",
            }
        )
    )
    email = forms.EmailField(
        widget=forms.TextInput(
            attrs={
                "placeholder": "Email",
            }
        )
    )
    password = forms.CharField(
        widget=forms.PasswordInput(
            attrs={
                "placeholder": "Password",
                "autocomplete": "new-password",
            }
        )
    )
    confirm_password = forms.CharField(
        widget=forms.PasswordInput(
            attrs={
                "placeholder": "Confirm Password",
                "autocomplete": "new-password",
            }
        )
    )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.form_show_labels = False

        # https://stackoverflow.com/a/29717314
        for visible in self.visible_fields():
            # Add tailwind classes
            visible.field.widget.attrs[
                "class"
            ] = "input w-full text-white font-semibold max-w-xs border-[3px] border-warning focus:outline-0"
            visible.field.widget.attrs["style"] = "--tw-bg-opacity: 0.3"

https://discord.com/channels/725789699527933952/1066354856643809400/1066354859001008229 Seems i too ran into this exact problem

And this is how i fixed this error

js
    var el;
    el ??= document.querySelector('#id_username');

Sorry everyone for the noise

Hi guys, rly need some help with Django and HTMX! When a user hardcodes a URL path to any of my views in Django and sends a request, it is obviously not htmx request. This breaks literally everything :D, because it actually loads HTML page on a specific URL, which i don't need at all. I tried to set HTMX headers in a normal request object to make it work like htmx request but Django doesn't save any of them. I tried to use process_template_response and set headers there, but it doesn't work either. How do you recommend to use HTMX in those cases?

Lots of people use this Django app to test if http requests are HTMX ones or not

@flaky-fish-46395 https://pypi.org/project/django-htmx/

Yea i do that as well, but i don't need to check if this request is htmx or not, because i know it is not. Its like when i have to use login_required decorator and it redirects and load me html page on a new url, like ...8000/login_user/, but i don't need that. It won't send any htmx request from this page and i need to set htmx request attributes on a button and normal request attributes like 'method' on a form so it will work somehow. But i don't wanna do that. I don't want to redirect a user on a new URL at all, i just want to render login_user.html page and swap it inside the body tag as with normal htmx request . But to make it work i need to convert normal request into htmx request somehow.

i think it should be the other way round

instead of converting a normal request to htmx, you'll have to handle htmx and non-htmx requests separately in your view

if request.htmx: return template fragment else return full template

@flaky-fish-46395 you will find some useful patterns here https://github.com/spookylukey/django-htmx-patterns

Yea, handle them separately seems like a good solution, but kinda sad that i can't create fully dynamic application

fully dynamic as SPA ?

because htmx is as close as it gets to an SPA without the hassle of a js framework

or, maybe I don't get your definition of "fully dynamic"

Like without using any pages except of the root. Just render the root once and upload new elements in it.

but that's exactly what htmx does

it allows for dom elements operations without rendering the full page

I invite you to take a look at the documentations of htmx and the many examples of its implementation with django

Yea i understand that, but it's kinda hard for me to user it because i don't know front-end part like at all 😄 Ty for yr advice tho!

no problem 🙂 feel free to ask questions about htmx/django, I use it in production daily. happy to help if I can

@flaky-fish-46395 why don't you just intercept http requests and convert to htmx requests with some sort of middleware?

like that HtmxMiddleware class

^ exactly "This middleware attaches request.htmx, an instance of HtmxDetails (below). Your views, and any following middleware, can use request.htmx to switch behaviour for requests from htmx. The middleware supports both sync and async modes."