https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • w
    that way you dont have to use a separate template for "regular" requests and htmx requests. Although, this wouldn't be something relevant to django-htmx really
  • f
    Browsers cache 
    css
    and 
    js
    , depending on what caching policy you configured on your static-files-hosting-webserver.
  • f
    And 
    hx-boost
    only selects the 
    body
    anyways afaik
  • f
    Unless explicitly specified differently~
  • w
    oh, this is good to know. Although I suppose the navbar and footer are in the 
    body
    but 🤷
  • f
    Yeah. Just yesterday I started wrapping my whole content in 
    hx-boost
    like so:
    Copy code
    html
<body>
<!-- navbar etc-->
<div id="main-body-wrapper"
           hx-boost="true"
           hx-select="#main-content"
           hx-target="#main-content"
           hx-swap="outerHTML show:window:top"
           hx-push-url="true"
           hx-inherit="false">
  <div id="main-content">[content]</div>
</div>
<!-- other stuff -->
</body>
  • f
    Although this only works properly with a 
    hx-inherit
    as a new attribute @User is currently looking into
  • w
    ooo, good idea
  • w
    What's the concept of hx-inherit? (or is there a github discussion?)
  • f
    It basically allows you to disable the default auto-inheritance for certain attributes: https://github.com/bigskysoftware/htmx/pull/753
  • w
    oh, gotcha. So children of 
    main-body-wrapper
    won't automatically have, e.g., 
    hx-push-url
    set to true?
  • f
    Hey btw regarding this – how are you doing that? Say you have a model + a second model that's related and you need to edit both at the same time (similar to how you would use TabularInline in Django admin) – requires two forms, no? How do you do that with the form mixin?
  • w
    Haven't really dealt with this use case yet, most of my forms are e.g., SignupForm, LoginForm, ContactForm, PasswordResetForm, etc.
  • f
    They still will; as. 
    hx-boosted
    kinda forces the url to be pushed. It's more that children htmx elements defining their own HTMX-logic would otherwise have e.g. 
    hx-select
    Consider this HTML:
    Copy code
    html
<div id="main-body-wrapper"
           hx-boost="true"
           hx-select="#main-content"
           hx-target="#main-content"
           hx-swap="outerHTML show:window:top"
           hx-push-url="true"
           hx-inherit="false">
  <div id="main-content">
    <span hx-get="/test/" hx-target="this">Click me</span>
  </div>
</div>
    The 
    span
    would automatically inherit 
    hx-select
    , which – if 
    #main-content
    is not present in the HTML the 
    /test/
    endpoint returns – results in an empty 
    span
  • f
    Gotcha
  • w
    Ohh, cool cool. Wasn't aware of 
    hx-select
    (just discovered the lib this week). So the response would still be the entire page/template, but 
    hx-select
    would just swap the relevant portion 👍
  • w
    Thanks for explaining it to me
  • f
    Anytime.
  • m
    Hello everyone! I have a general Django+HTMX question that I wondered if you could help me with. I have an application with some basic permissions checking code, where if the user doesn't have the right permissions for an endpoint, it raises a PermissionDenied exception (from django.core.exceptions). If the user made the request not using HTMX, the response is a full 403 html page with a nice error message on it. If the request is made with HTMX, the page doesn't change but the HTML is in the response (CustomEvent.detail.serverResponse). I was wondering if there's an easy "just display all full error pages" setting for HTMX. At the moment my application has an event listener for htmx:beforeSwap and if the event status is a 403 it swaps the content into the page body. That approach seemed okay but it would be nicer/simpler if I it was just displaying the full returned 403 page.
  • h
    This is how it's done in Django htmx:
  • h
  • l
    hey guys, just wanted to ask how do you handle user feedback (success/failure) when submitting django forms with htmx? Django returns status 200 when there's validation error so can't really rely on it
  • l
    and the state while submitting
  • f
    When there's a validation error, just swap the form so it renders with errors.
  • f
    And for success, you can either swap your messages div OOB with the rendered success (https://htmx.org/attributes/hx-swap-oob/) or use something like toastr.
  • l
    hmm bootstrap has toasts built-in too, I might give it a shot
  • l
    Also, how not to show success toast if django returned validation error?
  • f
    Don't return a success message when the form is not valid^^ or filter the messages in your template.
    Copy code
    django
<div id="messages">
  {% spaceless %}
  {% if messages %}
    {% if message.level != DEFAULT_MESSAGE_LEVELS.SUCCESS %}{% endif %}
  {% endif %}
  {% endspaceless %}
</div>
  • m
    Thanks! That was a good suggestion. Great code in that file.
  • b
    Oh thanks, in hindsight this is obvious, but I was just about to unnecessarily split up all my templates into full and partial to achieve the same thing 🙂
1...383940...100Latest