https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • m
    yes, but you'll need the correct css selector:
    Copy code
    [name='element'],[name='element2']
  • m
    I often find its easier to introduce a class to all the stuff I want to include if they are scattered around
  • m
    and just use that class
  • c
    How do you do a hx-trigger on a date field hx-trigger="keyup changed"?
  • c
    I can only get the trigger to work on a clicked date field
  • c
    This only works once I select the date click out of the date and then click it again
  • m
    use 
    monitorEvents
    in chrome to see what events are being triggered on the input and see if there are any good options: https://htmx.org/docs/#debugging
  • a
    I am running into a strange issue with 
    hx-swap-oob
    . I have this
    Copy code
    html
 <tr><td><button hx-post="/" hx-target="closest tr" hx-swap="outerHTML"></button></td></tr>

<!-- my response -->
<tr>.....</tr>
    That works fine. But when my response is this, the weirdest thing happens.
    Copy code
    html
   <div id="messages" hx-swap-oob="true">....</div>
   <tr>....</tr>
    When I do that, the message works but all the html tags get stripped out of my 
    <tr>
    so instead I just get whatever text was in the 
    tr
    but all 
    tr
    tags and 
    td
    tags are left out of the response. Any ideas?
  • m
    Yeah, this is a problem with parsing table rows in the older manner. You can turn on template-based parsing and that will probably fix it, https://htmx.org/docs/#config
  • m
    set htmx.config.useTemplateFragments to true and it should work
  • a
    I already have that set in the head like this, and it's still not working. Any other ideas?
    Copy code
    html
    <meta name="htmx-config" content='{"useTemplateFragments":true}'>
  • h
    I learned about template context processors, and wrote one which passes a 
    base_template
    . Its value depends on whether or not the request was used with htmx or not, as per the tip on https://django-htmx.readthedocs.io/en/latest/tips.html.
    Copy code
    python
def htmx_base_template(request):
    if request.htmx and not request.htmx.boosted:
        base_template = "partial.html"
    else:
        base_template = "base.html"

    return {
        "base_template": base_template,
    }
  • h
    now I don't have to write it anytime I want to do htmx base template stuff
  • a
    I have a contact form that isn't working, but it isn't sending me to the debug page (Django). Using htmx.logAll() in console, I see the serverResponse has the debug page. How do I redirect to it when I get an error?
  • e
    If the debug page is a response to an HTMX Ajax request, then can't you see it in the browser developer tools > Network?
  • a
    I'm not at my computer now (nearly bedtime here), but I'll check it out tomorrow. For the record, it's my first time putting a Django page in public. Learned that I needed to add a default email address to send messages from, as well as a email address for error logs, in the settings. I think I needed to add my email host to ALLOWED_HOSTS. Looking at logs gave nearly no help ("connection refused").
  • m

    https://www.youtube.com/watch?v=lWdzCUxsMNcâ–¾

  • i
    does htmx custom-event works on redirect?
  • r
    Hi there! Does anyone know how to combine a 
    ListView
    and a 
    DeleteView
    in Django ? With HTMX, it would be useful to me, to be able to not just remove the deleted object in the list (like in the examples), but to update the DOM with the new table. I explained my issue here in detail here: https://stackoverflow.com/questions/73237624/django-combine-listview-and-deleteview-to-use-with-htmx
  • b
    I'd suggest adding an 
    HX-Trigger
    response header (https://htmx.org/headers/hx-trigger/) to your 
    DeleteView
    and listening for it on the list (
    hx-trigger="myCustomEvent from:body"
    ) along with the other 
    hx-
    attributes required for calling your ListView and thus refreshing the fragment. That's what I do and it seems to work pretty well.
  • h
    Should be able to override the list view's delete method handling and then use hx-delete to trigger it
  • h
    I think I've generally used two endpoints for that case
  • h
  • r
    Thanks ! I'll take a look to do something similar. As the need could occur for DeleteView, CreateView, or UpdateView, I guess the best would be to create a mixin which returns the result list, rather than the item itself
  • h
    on the stuff I'm doing now
  • h
    I'm finding a pattern i use often is:
  • h
    / which loads with a section like
  • h
    Copy code
    html
  <div class="flex flex-col"
    hx-trigger="load"
    hx-get="{% url "appointment-list" %}"
    hx-target="#appointment-left-content"
    hx-swap="innerHTML">
    loading appointments..
    <img class="self-center"
      height="100"
      width="100"
      src="{% static "img/loading.svg" %}">
  </div>
  • h
    and then the page loads, hx-trigger fires and the data is lazy loaded in
  • h
    and then you have appointment-list and there's a couple contexts that can be used in
1...676869...100Latest