https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • r
    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
    Yes.
  • f
    Either use this snippet or set 
    hx-headers
    in the attributes.
  • r
    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
    It works with 
    hx-headers
    – 
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
  • h
    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
    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
    oob?
  • h
    and target that section?
  • a
    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
    the hx-get can send state back and forth when you click the button right
  • m
    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
    You may also want to use a light client-side lib like jquery, alpine or hyperscript, if that simplifies things
  • a
    🙏
  • w
    Has anyone put together an HTMX way to do dynamic formsets in Django?
  • p
  • w
    Awesome, thanks I'll check it out! I have a solution that relies on a js file, so looking forward to something "simpler"
  • w
    Hmm, looks like he actually says "Don't do Formsets with HTMX" and makes his own version of a formset.
  • m
    lol
  • m
    a true developer
  • w
    I think I have an idea of how to do it in a more HTMX manner, going to try some ideas.
  • p
    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
    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
    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
    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
    If you happen to make this a 
    hyperscript
    behavior
    , I'd also be v interested in it
  • w
    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
    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
    can someone help me please: The hx-trigger function is never being called. Why?
  • b
    (this is all happening in a 
    <table>
    )
1...394041...100Latest