https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • b
    Ah yep, thought that may be the issue. 
    RequestFactory
    doesn't run middleware. https://docs.djangoproject.com/en/4.1/topics/testing/advanced/ "It does not support middleware. Session and authentication attributes must be supplied by the test itself if required for the view to function properly." If possible I'd switch it to use the normal test client, as that runs through the standard request call stack and is more similar to a real request. If you must use 
    RequestFactory
    then you can either set the request how you're doing, or manually call the middleware so you know you're testing in a state your middleware provides, but that's a little more effort.
  • b
    The 
    .dockerignore
    file is only used when building to ignore adding files into a build context. It can make your builds faster and resulting images smaller, and can also have a security impact if it means you're guaranteed not to have any files with credentials in them stored in your image. It doesn't have any affect on 
    up
    or any running containers.
  • a
    Results from Django Developers Survey 2022.. great news for HTMX..
  • r
    Very cool. Also side goodness - for the top CI/CD result being Github Actions.. because Gitea is standardizing on Actions for CI/CD. Seems like that format is going to become standard-ish.
  • r
    Also 5% -> 16% for htmx is insane growth.
  • r
    Hey everyone, gonna deploy my all redesigned site (100% HTMX + HS) very soon. Just wanted to verify that 
    hx-ext="debug"
    is not gonna cause any accidents in production? I remember reading it will only activate if the Django 
    DEBUG
    is 
    True
    .
  • r
    Hello I have a small problem, when I post a data I have a page that opens in my tag "a" I do not understand why here is my code
    Copy code
    html
<a hx-post="printerthermal?id={{ showorder1.id }}" class="btn-imprimer">imprimmer</a>
  • b
    The default behaviour is to swap into the element that triggered the request. Check out 
    hx-target
    to pick a new element to swap into. https://htmx.org/attributes/hx-target/
  • m
    How might I implement a 'see more' button to 'interrupt' an infinite scroll? I have an infinite scroll on my blog site where each 'page' is three blog posts.
    Copy code
    html
{% for post in posts %}
{% if forloop.last %}
<div hx-get="{{ url }}?page={{ page_obj.number|add:1 }}" hx-trigger="revealed" hx-swap="afterend" hx-target="this" rel="next">
  {% else %}
  <div>
    {% endif %}
    After the user scrolls for awhile (maybe 3-4 pages) I would like to show a 'see more' button and allow the user to scroll to the bottom of the footer. I've thought about using some kind of counter and doing a += 1 every time 
    hx-revealed
    is triggered. After it reaches 3, I stop injecting posts and instead show a 'view more posts' button.
  • m
    This is what I came up with that works for me!
    Copy code
    html
{% load static %}
{% load post_utils %}
{% for post in posts %}
{% if forloop.last %}
{% if not page_obj.number|divisibleby:"6" %}
<div hx-get="{{ url }}?page={{ page_obj.number|add:1 }}" hx-trigger="revealed" hx-swap="afterend" hx-target="this"
  rel="next">
  {% else %}
  <button id="see-more-btn" hx-get="{{ url }}?page={{ page_obj.number|add:1 }}" hx-trigger="click" hx-swap="outerHTML"
    hx-target="this" rel="next">See more</button>
</div>
{% endif %}
{% else %}
<div>
  {% endif %}
  <p>post content</p>
  {% endfor %}
  • m
    And here's a little demo of it working.
  • m
    I made it EEEEVEN cleaner
    Copy code
    html
{% for post in posts %}
  {% include "blog/parts/post_card.html" %}
  {% if forloop.last %}
    {% if page_obj.has_next %}
      {% if not page_obj.number|divisibleby:"3" %}
        <div hx-get="{{ url }}?page={{ page_obj.number|add:1 }}" hx-trigger="revealed" hx-swap="afterend" hx-target="this" rel="next"></div>
      {% endif %}
      {% if page_obj.number|divisibleby:"3" %}
        <div class="text-center mb-5">
          <button class="btn-primary btn" id="see-more-btn" hx-get="{{ url }}?page={{ page_obj.number|add:1 }}" hx-trigger="click" hx-swap="outerHTML" hx-target="this" rel="next">Load More Posts</button>
        </div>
      {% endif %}
    {% endif %}
  {% endif %}
{% endfor %}
  • b
    Fly.io with some htmx love: https://fly.io/blog/a-no-js-solution-for-dynamic-search-in-django/ (Cc @mysterious-toddler-20573 )
  • r
    htmx featured on fly.io. Lovely.
  • p
  • p
    Not a bad article but some omissions: for swapping out multiple elements you can use 
    hx-swap-oob
    and I didn't see a mention of Hyperscript/Alpine etc for handling extra dynamic requirements
  • m
    Okay it isn't much and no idea if I'm going about it the 'correct' way, but pretty proud of my preview functionality using htmx and django so gotta share lol
  • a
    Another approach I use through my current project instead of oob (honestly haven't tried oob, it could be better approach) for things like navbar, valid actions for a component, etc is to use 
    hx-trigger
    since you can have it respond to event that you sent back with another htmx response. Now in your login case might not be as applicable because you might just be using the built-in login views, but still a great pattern to add to toolkit. In this case I return 
    refreshImages
    as an event in a view saving upload images (for example):
    Copy code
    return HttpResponse(
    status=204,
    headers={"HX-Trigger": json.dumps({"refreshImages": None})},
)
    Copy code
    <div 
    hx-trigger="load, refreshImages from:body" 
    hx-get="{% url 'apps.main:facility_images_render' pk=facility_obj.id %}" 
    hx-target="this"
>
</div>
  • How to correctly import htmx and extensions when using vite?
    a
    How to correctly import htmx and extensions when using vite?
  • when i import any extension, it throws htmx is not defined error
    a
    when i import any extension, it throws htmx is not defined error
  • Does anyone have beginner tutorials that are actually geared for beginners? Really seems like HTMX is good, but the beginner tutorials aren't geared towards beginners only experienced people switching to HTMX which isnt me sadly
    s
    Does anyone have beginner tutorials that are actually geared for beginners? Really seems like HTMX is good, but the beginner tutorials aren't geared towards beginners only experienced people switching to HTMX which isnt me sadly
  • For django specifically there are some examples here: https://github.com/spookylukey/django-htmx-patterns/
    m
    For django specifically there are some examples here: https://github.com/spookylukey/django-htmx-patterns/
  • I was kind of the same until I just started using it copying examples from htmx docs or this
    m
    I was kind of the same until I just started using it copying examples from htmx docs or this
  • 1. Htmx sends a request 2. Django view receives request and returns a response (partial template usually) 3. Htmx replaces html element with partial template
    m
    1. Htmx sends a request 2. Django view receives request and returns a response (partial template usually) 3. Htmx replaces html element with partial template
  • That's how I use it anyways. I don't quite follow all the oob stuff tbh
    m
    That's how I use it anyways. I don't quite follow all the oob stuff tbh
  • OOB? out of box?
    s
    OOB? out of box?
  • like on the basic example from htmx website it says: ```html <script src="https://unpkg.com/htmx.org@1.9.0"></script> <!-- have a button POST a click via AJAX --> <button hx-post="/clicked" hx-swap="outerHTML"> Click Me </button> ``` So to use I guess I make a url like: ```py # URLS.py path('clicked/', test_view, name='clicked'), ``` Right? Then a hello world view could be: ```py def test_view(request): context = 'Hello World!' return render(request, context) ``` ? Feel like this is right, but when I try this I get a 403 Forbidden Error when I click that button from the example.
    s
    like on the basic example from htmx website it says:
    Copy code
    html
  <script src="https://unpkg.com/htmx.org@1.9.0"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>
    So to use I guess I make a url like:
    Copy code
    py
# URLS.py
    path('clicked/', test_view, name='clicked'),
    Right? Then a hello world view could be:
    Copy code
    py
def test_view(request):
    context = 'Hello World!'
    return render(request, context)
    ? Feel like this is right, but when I try this I get a 403 Forbidden Error when I click that button from the example.
  • If you have not seen it already, the BugBytes tutorials are good. He goes over everything, not just the HTMX.
    k
    If you have not seen it already, the BugBytes tutorials are good. He goes over everything, not just the HTMX.
  • https://www.youtube.com/watch?v=Ula0c_rZ6gk&list=PL-2EBeDYMIbRByZ8GXhcnQSuv2dog4JxY
    k

    https://www.youtube.com/watch?v=Ula0c_rZ6gk&list=PL-2EBeDYMIbRByZ8GXhcnQSuv2dog4JxYâ–¾

  • Made a button that loads content onto the page. Now I just need to figure out how to make it so you can't keep loading said content. Right now I can keep clicking the button
    s
    Made a button that loads content onto the page. Now I just need to figure out how to make it so you can't keep loading said content. Right now I can keep clicking the button
1...959697...100Latest