https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • i

    important-winter-64905

    02/21/2022, 1:01 PM
    The way I had to get this to work before was that I had
    class="update_flash"
    and used only one style:
    Copy code
    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.
  • m

    mysterious-toddler-20573

    02/21/2022, 1:36 PM
    https://twitter.com/htmx_org/status/1495744075890401282
  • h

    hundreds-camera-24900

    02/21/2022, 11:56 PM
    Writing up a pull request for this now: https://django-htmx.readthedocs.io/en/latest/
  • h

    hundreds-camera-24900

    02/21/2022, 11:56 PM
    Right now I'm planning on adding flash message configuration and CSRF token to the "tips" section
  • h

    hundreds-camera-24900

    02/21/2022, 11:56 PM
    but any other ideas would be welcome
  • r

    rich-arm-7401

    02/22/2022, 8:33 PM
    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?
    Copy code
    {% 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 %}
  • b

    brave-magazine-28098

    02/22/2022, 8:36 PM
    Are there any console errors?
  • r

    rich-arm-7401

    02/22/2022, 8:38 PM
    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.
    Copy code
    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
  • r

    rich-arm-7401

    02/22/2022, 8:45 PM
    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.
  • r

    rich-arm-7401

    02/22/2022, 8:49 PM
    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.
  • b

    brave-magazine-28098

    02/22/2022, 8:50 PM
    👍
  • m

    mysterious-toddler-20573

    02/23/2022, 12:37 AM
    FYI: https://discord.com/channels/725789699527933952/931554608537550959/945835196446548039
  • i

    important-winter-64905

    02/23/2022, 6:59 PM
    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
  • h

    hundreds-camera-24900

    02/23/2022, 7:01 PM
    that sounds awesome
  • h

    hundreds-camera-24900

    02/23/2022, 7:01 PM
    iit sounds like a good example for core htmx as well?
  • i

    important-winter-64905

    02/23/2022, 8:54 PM
    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
  • h

    hundreds-camera-24900

    02/23/2022, 8:54 PM
    I mean something suited well for https://htmx.org/examples/
  • h

    hundreds-camera-24900

    02/23/2022, 8:55 PM
    unless there's some django specific bits, my thinking is the main htmx.org gets a lot more traffic
  • i

    important-winter-64905

    02/23/2022, 9:31 PM
    I think in terms of django, but I don't think it is specific
  • i

    important-winter-64905

    02/23/2022, 9:31 PM
    it's just vanilla html table formatting + htmx to handle request and response
  • b

    blue-gold-89534

    02/23/2022, 11:20 PM
    does anybody know of a django implementation of a SSE?
  • b

    bland-coat-6833

    02/24/2022, 9:57 AM
    https://github.com/fanout/django-eventstream this seems to be the only one
  • b

    bland-coat-6833

    02/24/2022, 9:58 AM
    I’m really looking forward to more async in Django. I’ve been using Starlette instead as I wanted SSE for one app.
  • b

    blue-gold-89534

    02/24/2022, 10:47 AM
    Thanks - I will try that!
  • b

    blue-gold-89534

    02/25/2022, 10:09 AM
    I successfully installed django-eventstream and I can run the JS tests but I failed so far to get it working with HTMX
  • w

    white-motorcycle-95262

    02/25/2022, 9:04 PM
    Been awhile since I've checked in here, anyone have a good way to handle inserting form Media using HTMX?
  • f

    fresh-judge-74869

    02/26/2022, 5:39 AM
    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,

    https://www.youtube.com/watch?v=uU1uLYaNr9U&t=534s▾

    . 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.
  • b

    blue-gold-89534

    02/26/2022, 8:17 AM
    I know it is in spanish, but this covers your question https://github.com/rg3915/django-htmx-tutorial
  • f

    fresh-judge-74869

    02/26/2022, 1:11 PM
    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"
  • f

    fresh-judge-74869

    02/26/2022, 1:14 PM
    Copy code
    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
1...525354...100Latest