https://htmx.org logo
Join Discord
Powered by
# πŸ”₯-django-htmx
  • r

    red-tailor-33123

    01/09/2022, 3:16 PM
    Hi guys ! Let’s say I would like to hx-post without a Django form, how can I simply set the X-CSRFToken header using htmx or hyperscript and the {{csrf_token}} value ? Is it okay to do so ?
  • f

    fresh-controller-36545

    01/09/2022, 4:41 PM
    Yes.
  • f

    fresh-controller-36545

    01/09/2022, 4:42 PM
    Either use this snippet or set
    hx-headers
    in the attributes.
  • r

    red-tailor-33123

    01/09/2022, 5:44 PM
    thank you, I tried using hx-headers to set X-CSRFToken to {{csrf_token}} but it didn’t work. I ended up wrapping my toggle in a element with {% csrf_token %} and it works fine
  • f

    fresh-controller-36545

    01/09/2022, 7:48 PM
    It works with
    hx-headers
    –
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
  • h

    hundreds-camera-24900

    01/09/2022, 9:42 PM
    I thought about doing things that way, but decided to just use boosted links instead. I felt like when it was truly a partial you didn't need to extend from base, or in wierd cases use the hx-retarget header to force the response on the body
  • a

    abundant-breakfast-94967

    01/09/2022, 11:00 PM
    hello! I have a page where a user is able to search for objects and add or remove them (see + and - signs with the green/red colors) - I have search results nicely swapping in to a search result div so that the page doesn't re-render when the user submits the form (yay htmx!) - I have the buttons factored out into a component so that only the html for the button is returned after saving the user's selection (yay htmx!) (code below) These are major improvements to what would otherwise require re-rendering the entire page each time and give a user a much worse UX. However, I'm now desiring the ability to make it so that if the user hasn't selected anything yet then "View Selections" would not be rendered at the top. Further, I want to make it so that when a user first adds a selection that the top fades in with the buttons for the ability to add/remove selections. I have ideas of how to do this in react, but hoping for some advice to stay in htmx world. This is the type of thing, tracking cross-component state that's not terribly difficult to do in a UX framework like react but I'm scratching my head on how to do it in htxm. Basically not sure idiomatic ways in htmx to track state across components and reactively re-render based on the state
    Copy code
    <div class="flex items-center m-3" id="select-button-{{result.id}}">
        {% if result.selected %}
        <div 
          class="cursor-pointer px-2 text-xl rounded-lg bg-red-200 hover:bg-red-300"
          hx-post="/app/remove_facility/{{result.id}}/"
          hx-swap="outerHTML"
          hx-target="#select-button-{{result.id}}"
        >
          <i class="fas fa-minus"></i>
        </div>
        {% else  %}
        <div 
          class="cursor-pointer px-2 text-xl rounded-lg bg-green-200 hover:bg-green-300"
          hx-post="/app/save_facility/{{result.id}}/"
          hx-swap="outerHTML"
          hx-target="#select-button-{{result.id}}"
        >
          <i class="fas fa-plus"></i>
        </div>
        {% endif %}
    </div>
  • h

    hundreds-camera-24900

    01/09/2022, 11:06 PM
    oob?
  • h

    hundreds-camera-24900

    01/09/2022, 11:07 PM
    and target that section?
  • a

    abundant-breakfast-94967

    01/09/2022, 11:08 PM
    So the button component would need to know about the "remove all selections" component, and the "remove all selections" component needs to add html for all of the buttons components and send them back in order to swap in oob? I could experiment with "remove all" sending oob and target a pattern using css selector. For some reason this feels less clean than using a state store, but will give it a go
  • h

    hundreds-camera-24900

    01/09/2022, 11:32 PM
    the hx-get can send state back and forth when you click the button right
  • m

    mysterious-toddler-20573

    01/10/2022, 12:39 AM
    the "htmx way" is to expand the target to include everything you need to update, then oob swaps, then events: https://htmx.org/examples/update-other-content/
  • m

    mysterious-toddler-20573

    01/10/2022, 12:40 AM
    You may also want to use a light client-side lib like jquery, alpine or hyperscript, if that simplifies things
  • a

    abundant-breakfast-94967

    01/10/2022, 12:58 AM
    πŸ™
  • w

    white-motorcycle-95262

    01/10/2022, 1:40 AM
    Has anyone put together an HTMX way to do dynamic formsets in Django?
  • p

    plain-kangaroo-26043

    01/10/2022, 11:03 AM
    https://justdjango.com/blog/dynamic-forms-in-django-htmx maybe?
  • w

    white-motorcycle-95262

    01/10/2022, 3:52 PM
    Awesome, thanks I'll check it out! I have a solution that relies on a js file, so looking forward to something "simpler"
  • w

    white-motorcycle-95262

    01/10/2022, 4:54 PM
    Hmm, looks like he actually says "Don't do Formsets with HTMX" and makes his own version of a formset.
  • m

    mysterious-toddler-20573

    01/10/2022, 4:59 PM
    lol
  • m

    mysterious-toddler-20573

    01/10/2022, 4:59 PM
    a true developer
  • w

    white-motorcycle-95262

    01/10/2022, 5:09 PM
    I think I have an idea of how to do it in a more HTMX manner, going to try some ideas.
  • p

    prehistoric-cat-63987

    01/10/2022, 8:47 PM
    I think I saw a tweet on Twitter where a man said he built a tool with django-forms and htmx to enhance forms interaction in Django
  • w

    white-motorcycle-95262

    01/10/2022, 9:40 PM
    I'm pretty confident in my django with the exception of FormSets, which I rarely use. I think there's a natural way to do "adding a form" by submitting the form and creating a new formset_factory (with extra=1) using the request.POST data.. but my idea's not quite fully formed. It also wouldn't take into account deleting a form yet 🀷
  • f

    fresh-controller-36545

    01/10/2022, 11:11 PM
    I would not advocate for using a super-custom solution here as in to rebuild the formset functionality. You'll need to get a couple of things right to make formsets work, but it's not witchcraft either.
  • f

    fresh-controller-36545

    01/10/2022, 11:12 PM
    This one is quite good and should give you a good starting point on what to watch out for: https://github.com/elo80ka/django-dynamic-formset/blob/master/src/jquery.formset.js
  • f

    fresh-controller-36545

    01/10/2022, 11:13 PM
    If you happen to make this a
    hyperscript
    behavior
    , I'd also be v interested in it
  • w

    white-motorcycle-95262

    01/11/2022, 2:43 AM
    yeah, a hyperscript behavior would be slick. Since I'm converting most of my work to HTMX/Hyperscript right now, I'm aiming for the low hanging stuff while I get used to the two, but would love to circle back on Formsets when I'm more familiar with Hyperscript
  • b

    blue-gold-89534

    01/14/2022, 2:34 PM
    Copy code
    html
    <tr id="editProductRow">
        <form hx-post="{% url 'update' pk %}"
              hx-target="#editProductRow"
              hx-encoding="multipart/form-data"
              hx-swap="outerHTML">
            {% for field in form.visible_fields %}
                <td>{{ field }}</td>
            {% endfor %}
    
            <!-- Button to edit a product -->
            <td class="text-end">
                <button type="submit"
                        class="btn btn-success"
                        hx-trigger="click[showEditButtons()]">
                    <img src="{% static 'images/save.svg' %}" width="32px" height="32px">
                </button>
            </td>
        </form>
    </tr>
  • b

    blue-gold-89534

    01/14/2022, 2:34 PM
    can someone help me please: The hx-trigger function is never being called. Why?
  • b

    blue-gold-89534

    01/14/2022, 2:34 PM
    (this is all happening in a
    <table>
    )
1...394041...100Latest