The way I had to get this to work before was that I had

class="update_flash"

and used only one style:

td.update_flash.htmx-settling {
  background: #36842d;
}

If the initial state of

class

was anything except

update_flash

it would not work. After HTMX swapped in the class would be changed to

update_flash

and so it would then do the flash when the swap was done. As it is now, the class is

class="update_flash {{ update_color }}"

. On first load of the page this is

class="update_flash"

which has no defined css. When I do the swap, it will change to

class="update_flash update_green"

. When this is done the first time, nothing happens. If I submit again, it will flash green. Similarly, if I submit something to flash red, it will only flash the second time the

update_red

class is inserted. This makes me believe the preexisting state has to include the class attribute you are trying to trigger but I don't want to add both and trigger both because people can enter data multiple times to the same form. Sometimes it should flash green and other times it should flash red.

Writing up a pull request for this now: https://django-htmx.readthedocs.io/en/latest/

Right now I'm planning on adding flash message configuration and CSRF token to the "tips" section

but any other ideas would be welcome

Hey! Im loading some cards in a for loop. Each card should trigger a get request to a URL. But when clicked, there isn't a new get request sent out regardless of which card is clicked. Just the initial get is sent which returns data. Am I missing something here?

{% for campaign in campaigns %}
        {% if forloop.counter0|divisibleby:4%}
        <div class="row">
            {% endif %}
            <div class="col col-xl-3 col-lg-3 col-md-3 mb-4 col-sm-6">
                <div hx-get="{{object.get_detail_url}}" hx-target="#galleryContent" hx-swap="outerHTML"
                    hx-trigger="click" class="card bg-white rounded shadow" data-bs-toggle="modal"
                    data-bs-target="#GalleryModal">
                    <img class="img-fluid card-img-top"
                        src="{{ object.image.url }}">
                    <div class="p-4">
                        <h1 class="fs-5 text-dark" href="#">{{ object.title}}</h1>
                        <p class="small text-muted mb-0">{{object.description |truncatechars:75}}</p>
                        <div class="row mt-4">
                            <div class="col col-md-12 col-sm-12 col-lg-6 col-12">
                                <p class="small mb-0"><i class="fas fa-hashtag me-2"></i><span
                                        class="fw-bold">ART</span></p>
                            </div>
                            <div class="col col-md-12 col-sm-12 col-lg-6">
                                <div class="badge rounded-pill bg-danger px-3 fw-normal"><span>New</span></div>
                                {% comment "" %}
                                TODO: Add loging for trends and tags
                                {% endcomment %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% if forloop.counter|divisibleby:4 or forloop.last %}
        </div>
        {% endif %}
        {% endfor %}

Are there any console errors?

Yeah just this one in the console. I was ignoring it because the target element is populated correctly but no new GETs were being sent out after the initial one.

htmx:targetError 9 htmx.org@1.6.1:1:19609
    ut https://unpkg.com/htmx.org@1.6.1:1
    lt https://unpkg.com/htmx.org@1.6.1:1
    ot https://unpkg.com/htmx.org@1.6.1:1
    Zt https://unpkg.com/htmx.org@1.6.1:1
    i https://unpkg.com/htmx.org@1.6.1:1
    (Async: EventListener.handleEvent)
    ke https://unpkg.com/htmx.org@1.6.1:1
    B https://unpkg.com/htmx.org@1.6.1:1
    ke https://unpkg.com/htmx.org@1.6.1:1
    Ze https://unpkg.com/htmx.org@1.6.1:1
    Ze https://unpkg.com/htmx.org@1.6.1:1
    B https://unpkg.com/htmx.org@1.6.1:1
    Ze https://unpkg.com/htmx.org@1.6.1:1
    tt https://unpkg.com/htmx.org@1.6.1:1
    rt https://unpkg.com/htmx.org@1.6.1:1
    B https://unpkg.com/htmx.org@1.6.1:1
    rt https://unpkg.com/htmx.org@1.6.1:1
    <anonymous> https://unpkg.com/htmx.org@1.6.1:1
    (Async: EventListener.handleEvent)
    rr https://unpkg.com/htmx.org@1.6.1:1
    <anonymous> https://unpkg.com/htmx.org@1.6.1:1
    <anonymous> https://unpkg.com/htmx.org@1.6.1:1
    <anonymous> https://unpkg.com/htmx.org@1.6.1:1
    <anonymous> https://unpkg.com/htmx.org@1.6.1:1

I noticed that the hx-trigger attribute has a "once" modifier so I assumed the default event would allow me trigger a click event over and over but it doesn't.

Ah, you know what! It just turns out I can't read properly. It looks like I was using outterHTML and changin my entire element. So when I clicked the button again, the target element was no longer present.

👍

FYI: https://discord.com/channels/725789699527933952/931554608537550959/945835196446548039

One thing I had to figure out (with some help here) was how to create code snippets that could be inserted within a table. I found HTMX to be a very useful approach for this because there are limits with normal html forms that disallow submitting "one cell" of the table at a time. I forget axis it was but I think you can set up forms to work entire rows but not entire columns because of the way the DOM is organized. I use the flash indicator to let users know that the form has been submitted and then insert the latest submission in that cell of the table. That's quite a bit more than a "tip" but maybe useful to some. I'd have to pull this code out of my current app in a generic way because I can't release this code directly

that sounds awesome

iit sounds like a good example for core htmx as well?

not sure what you mean by core but it was fairly easy to implement with htmx as it is now once I got my head wrapped around how to do it

I mean something suited well for https://htmx.org/examples/

unless there's some django specific bits, my thinking is the main htmx.org gets a lot more traffic

I think in terms of django, but I don't think it is specific

it's just vanilla html table formatting + htmx to handle request and response

does anybody know of a django implementation of a SSE?

https://github.com/fanout/django-eventstream this seems to be the only one

I’m really looking forward to more async in Django. I’ve been using Starlette instead as I wanted SSE for one app.

Thanks - I will try that!

I successfully installed django-eventstream and I can run the JS tests but I failed so far to get it working with HTMX

Been awhile since I've checked in here, anyone have a good way to handle inserting form Media using HTMX?

guys what is the best approach to make a chained dropdown list with htmx I try https://github.com/masbhanoman/django_3way_chained_dropdown_list but it uses AJAX https://simpleisbetterthancomplex.com/tutorial/2018/01/29/how-to-implement-dependent-or-chained-dropdown-list-with-django.html but has not htmx, . What I want is something in HTMX that can scale to many select value options and could have a search bar if the list is really big.

I know it is in spanish, but this covers your question https://github.com/rg3915/django-htmx-tutorial

thanks for the replay. I watch him and the two tutorials he has about dropdowns. I have problems when I update the form and change the company id. The two dependent chained dropdown show all the selected options. this is my model form based on a basic model: I have prefixed my form

prefix="main"

class OrderForm(forms.ModelForm):
    class Meta:
        model = Order
        fields = (
            "company",
            "project",
            "client",
        )
        labels = {
            "company": "Compañía",
            "project": "Proyecto",
            "client": "Cliente",
        }

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["project"].queryset = Project.objects.none()
        self.fields["client"].queryset = ClientProfile.objects.none()

        if "company" in self.data:
            try:
                company_id = int(self.data.get("main-company"))
                print("running:", company_id)
                self.fields["project"].queryset = Project.objects.filter(
                    company_id=company_id
                ).order_by("name")
                self.fields["client"].queryset = ClientProfile.objects.filter(
                    company_id=company_id
                ).order_by("name")
            except (ValueError, TypeError):
                pass 
        elif self.instance.pk:
            self.fields[
                "project"
            ].queryset = self.instance.company.project_set.order_by("name")
            self.fields[
                "client"
            ].queryset = self.instance.company.clientprofile_set.order_by("user__first_name")

Here when I take out the __init__ func the form works fine in create and update mode, but in the options os the proyect and client are populated with all data with out fittering