https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • r
    So you have quite a few options without touching javascript, a good list of them here:
  • r
    Basically 1cg is suggesting this method:
  • h
    But i'm already use the hx-target for update my list of tasks
  • r
    So expand the container, or: Or Would suggest reading the page so you are aware of what options are available to you before using javascript.
  • r
    Quite a few ways to do it. Gotta choose the best pattern for your workflow.
  • h
    Ok i will continue to search, I don't really understand how to use these options and my tests are not conclusive.
  • m
  • b
    Hey, any idea how to reinitialize flatpickr when inserting a form via htmx ajax request?
  • a
    Hi all, I am currently working on an app which uses Django, Alpine.js, and HTMX. I have a table, which upon a search form submission gets swapped out via HTMX. This works well. However, there is a slight delay before everything is loaded. In this time period, I want to show a loading screen. What would be the best way to show a loading screen until all elements have been swapped properly. At the moment I have this set up (simplified to post here): https://pastebin.com/v0e854L5
  • a
    I tried adding the following alpine.js x-on event (just trying to log to console atm) on the html piece that gets swapped by HTMX:
    Copy code
    <div id="search_results" @htmx:before-swap="console.log('Hello World!')">
..stuff here ...
</div>
    But that doesn't seem to fire off the console log. Would appreciate any pointers in the right direction.
  • r
  • r
    Also, the event is htmx:beforeSwap, not before-swap
  • c
    Trying to use Infinite load with djangos ListView and paginate_by, though I can't seem to get it to work properly, has anyone accomplished this?
  • b
    Where do you think you’re having trouble? Using the 
    Paginator
    class, accessing the data in the template, choosing the correct 
    hx-
    attributes?
  • b
    I’ve implemented pagination with htmx and Django, but not infinite load, happy to try and help 😊
  • c
    So I followed BugBites tutorials here

    https://www.youtube.com/watch?v=RacU_1NgVIg&t=419s▾

    I have 2 views, a ListView using the classed based method, and a search view on the same page to filter by name.
    Copy code
    class ClientList(ListView):
    model = User
    template_name = 'clients.html'
    paginate_by = 4
    context_object_name = 'people'
    
    def get_template_names(self):
        if self.request.htmx:
            return 'partials/client_card.html'
        return 'clients.html'

    def get_queryset(self):
        return User.objects.all().exclude(admin = True)
def client_search(request):
    if request.method == "POST":
        search = request.POST['search']
        people = User.objects.filter(Q(firstname__icontains=search) | Q(lastname__icontains=search)).exclude(admin = True)
        context = {
            'people': people
        }
    return render(request, 'partials/client_card.html', context)
  • c
    Looks like a recursive error as my search view is a htmx request
  • c
    so triggers that
  • c
    Copy code
    {% for person in people %}
{% if forloop.last %}
<div hx-get="{% url 'clients' %}?page={{ page_obj.number|add:1 }}" hx-trigger="revealed" hx-swap="afterend" hx-target="this" class="col col-md-6 col-12 col-xl-4" style="padding: 0;">

{% else %}
<div class="col col-md-6 col-12 col-xl-4" style="padding: 0;">
{% endif %}
    <div class="card" style="margin: 5px;">
        <div class="card-body" style="margin: 0;">
            <div class="row">
                <div class="col text-center align-self-center"><img class="rounded-circle people-face bg-light" src="{{person.profile_image.url}}"><i class="fa fa-female people-icon" data-bs-toggle="tooltip" data-bss-tooltip="" title="Female"></i></div>
            </div>
            <h4 class="text-primary card-title">
                <a href="{% url 'admin-view-client' person.pk %}">{{person.get_full_name}}</a>
            </h4>
            <h6 class="text-muted card-subtitle mb-2"><em>{{person.suburb}}</em></h6>
            <h6 class="text-muted card-subtitle mb-2" style="font-size: 13px;">NDIS: 4306734567, MANAGER: Woov Pay</h6>
            <p class="card-text">Next Booking: <strong>16/6/2022</strong></p>
            <div class="row" style="padding: 0;">
                <div class="col"><i class="fa fa-phone-square fs-1 text-primary" style="margin: 5px;"></i><i class="fa fa-envelope-square fs-1 text-primary" style="margin: 5px;"></i></div>
            </div>
        </div>
    </div>
</div>

{% endfor %}
  • c
    Template code
  • c
    to which uses the hx-trigger="revealed"
  • h
    here's how I did it in the past
  • h
  • b
    @calm-queen-64495 do you have any more info about how it isn't working? Returning the wrong page / getting server or htmx errors? Only thing I see from a quick glance is that you could possibly use 
    hx-get="{% url 'clients' %}?page={{ page_obj.next_page_number }}"
    instead of 
    .number|add:1
    . Gone's example looks good - does it help solve your issue at all?
  • i
    Hi, everyone. I'm new here. I'm learning HTMX
  • i
    Now I'm trying HTMX without CDN. Just Downloaded htmx.min.js and used tag, like documentation says, but can get it to work. With CDN, works fine. Don't know yet whatil is wrong
  • i
    Browser GET code 200 when trying to get the js file, so the src in script tag is right.
  • b
    Hm strange. Is it possible to see how you’re calling it, and what the browser’s network tab is showing?
  • b
    And welcome, btw! 😁
  • i
    Hi! Tanks for your time.
1...656667...100Latest