https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • v
    It can look something like this:
    Copy code
    python
#urls.py: 
    ...
    path('<int:pk>/some-page/', some_page, name='some_page'),
    path('<int:pk>/do-math/', math_html_fragment, name='do_math'),
    ...

#views.py:
def some_page(request):
  # Typical rendered html page, contains the html with htmx tags
  return render(request, 'some-page.html', ...)

@require_POST
def math_html_fragment(request): 
  # Do stuff with request.POST dict
  dummy_value = 5  
  ...
  return HttpResponse(dummy_value)

#some-page.html
...
<some-tag hx-post="{% url 'do_math' (some pk) %}"> 
...
  • v
    there's not really a predefined way of doing it. you have all the flexibility of django.
  • i
    Thanks that was a helpful skeleton. I appreciate the time it took you to write!
  • b
    Submitted the video for my DjangoCon video on using htmx with Django, and now I'm super nervous 😬 But yay! Three different htmx-related talks this year at DjangoCon. So if I tanked it, at least there are two others to keep the idea float 🤣 🤞
  • i
    @User and @User thanks for the encouragement. I've figure out several different way I can do some interesting things with Django and htmx
  • v
    Awesome! best of luck!
  • s
    Hey folks, got a question and wondering whether I could get a bit of help. I've got a and I want to inject in different HTML pages (partials) into the page based on what's been selected. My question is, is it possible to do this without creating a form?
  • u
    hx-get
    in a 
    <select>
    and the use of OOTB swap should do it, I guess: https://htmx.org/attributes/hx-swap-oob/
  • u
    No form nor a submit needed.
  • s
    I have something like:
    Copy code
    <select name="stage" hx-get="{% url '<url here>' %}" hx-target="#onboarding-steps" hx-indicator=".htmx-indicator">
                        <option>option 1</option>
    So the suggestion is to add hx-swap-oob="true" in there?
  • m
    No, that looks right to me
  • m
    hx-swap-oob
    is placed on the returned content: https://htmx.org/attributes/hx-swap-oob/
  • m
    If you want to target areas other than the element called out by 
    hx-target
  • m
    with content in addition to the "normal" content you are returning
  • w
    > Greetings. I am experimenting with hx-ws Websockets feature and struggling with getting the response data. I the example there is description that Content that is sent down from the websocket will be parsed as HTML and swapped in by the id property, using the same logic as Out of Band Swaps. Is there any suggestion to handle repsonse dict? what is the parsed HTMl like?
  • m
    (hence "out of band": the content is swaped out of the normal "band" of content)
  • w
    Copy code
    <div hx-ws="connect:/ws/game/{{ universe_id }}/update/{{ object }}/">
                    <div id="swap-test" hx-swap="innerHTML">
                        {{ first_call }}
                        Swap Test
                    </div>
                    <button hx-ws="send" class="card-footer-item" id="update-{{ object }}">
                        <i class="fas fa-angle-double-up" aria-hidden="true"></i>
                    </button>
                </div>
  • w
    This was my try
  • w
    I have added a div with id="swap-test" as first item in body but nothing rendered in my template
  • m
    Hi there, yes, htmx expects content in HTML form
  • m
    let me look at the code and see if the ability to transform responses is in place for it, as with ajax requests
  • w
    the url is rendered correctly and I got a response dictionary from websocket.
  • w
    the url is shown with django template tags
  • m
  • m
    we do give a websocket a chance to transform data (I think this is why you mean when you say dictionary, just a JSON object?) into HTML
  • m
    You would need to write an extension similar to client-side templates (or just use that extension if one of those templating libraries is acceptable for you): https://htmx.org/extensions/client-side-templates/
  • m
    Generally, htmx works with the server in HTML form, so if it is getting back anything else (e.g. JSON) you need to use an extension to transform it into content htmx can work with
  • w
    yes, it is a JSON object which is send back from Consumer to Websocket
  • m
    OK, so a bit more work then. Sorry about that, but htmx is html-oriented by default. Definitely doable though.
  • w
    thanks for the hint I will ahve a deep look into extensions. seems to be what I need
1...567...100Latest