https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • g
  • g
  • a
    Oh boy… as usual, you and I both should remember to RTM @fresh-controller-36545 😂
  • g
    The 
    hx-swap=“none”
    is important in cases like this. You have a delicate front-end component that already knows the correct state, and doesn’t need any new information from the server. So just post your updates and don’t listen for a response.
  • f
    Wasn't so wrong after all I guess 😛
  • f
    Thanks - very interesting 👍 Hope I'll one day have that much big brain to use htmx's full potential naturally
  • g
    If I get there, I’ll let you know 🤓 This toolset is still so new that we’re only starting to discover it’s potential. So remember, you are already in the vanguard of the revolution.
  • a
    @User I've been building htmx into a big Django project I'm building and love it. Trying to eliminate jQuery too, but it is still wired into Django itself so never completely free of it
  • b
    Since there are some skilled django devs around: I got stuck on a very weird looking problem when validating a form, probably starred at it for too long and would very much appreciate some help 😮‍💨
  • p
    Sure, what's the problem?
  • f
    hello I'm actually new in django and htmx in some point I understand how django works because has a very good debugger shell which helps me a lot. In the other hand django-htmx helps but some times its a little bit tricky anyway my problem is actually this issue https://github.com/rg3915/django-htmx-tutorial/issues/12. I have problems redirecting the form errors into modal.
  • f
    Unfortunately the issue you linked isn't in English and lacks the critical amount of code required to help.
  • f
    I can assure you though, that form errors in modals work.
  • f
    if you clone the repo https://github.com/rg3915/django-htmx-tutorial in the https://github.com/rg3915/django-htmx-tutorial/blob/main/backend/bookstore/models.py the title = models.CharField('título', max_length=100, unique=True) has a unique true attribute so the problem is when I submit a form with the book_create view with the same title it popup the error at the top of the list table as a new item.
  • m
  • f
    Because it's made that way. The script in the original HTML closes the modal directly upon form submission. Try this HTML instead:
    Copy code
    html
<!-- book_form_hx.html -->
<div class="modal-header">
  <h4 class="modal-title" id="addModalLabel">Adicionar Livro</h4>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<form
  hx-post="{% url 'bookstore:book_create' %}"
  hx-target="#formx"
  hx-select="#formx"
  hx-swap="outerHTML"
  hx-indicator=".htmx-indicator"
  hx-swap="afterbegin"
>
  <div id="formx" class="modal-body">
    {% csrf_token %}
    {% for field in form %}
      <div class="form-group p-2">
        {{ field.label_tag }}
        {{ field }}
        {{ field.errors }}
        {% if field.help_text %}
          <small class="text-muted">{{ field.help_text|safe }}</small>
        {% endif %}
      </div>
    {% endfor %}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
    <button type="submit" class="btn btn-primary">Salvar</button>
  </div>
</form>

<script>

</script>
    On the server-side you can then close the modal by sending a htmx header or using e.g. 
    hyperscript
    .
  • f
    5 comments already 👀
  • m
    and all pretty positive
  • m
    🐍 + = 🔥
  • l
    hi guys, i use htmx with django for delete in one list, make de process return the hx-trigger in request, but the list do not reload, someone give me an idea?
  • m
    can you post some code?
  • l
    yes, one moment
  • l
    my html
  • l
    Copy code
    {% extends 'core/index.html' %}
{% load static %}


{% block breadcrumb %}
<ol class="breadcrumb float-sm-right">
    <li class="breadcrumb-item">
        <a href="{% url 'core:index' %}">
            <i class="fas fa-home"></i>
            Página Inicial
        </a>
    </li>
    <li class="breadcrumb-item active">
        Usuários
    </li>
</ol>
{% endblock breadcrumb %}

{% block body %}
<div class="col-md-12">
    <div class="container-fluid">
        <div id="container-usuario-dados"
            hx-get="{% url 'usuario:create' %}"
            {% if pessoa %}
                hx-vals='{"usuario_id": "{{ usuario.id }}"}'
            {% endif %}
            hx-trigger="load"
            hx-swap="innerHTML">
        </div>
        <div id="container-usuario-list"
            hx-get="{% url 'usuario:list' %}"
            {% if pessoa %}
                hx-vals='{"usuario_id": "{{ usuario.id }}"}'
            {% endif %}
            hx-trigger="load, hx-list-updated from:body"
            hx-swap="innerHTML">
        </div>
    </div>
    {% comment %} {% include 'usuarios/list.html' %} {% endcomment %}
</div>

{% endblock body %}

{% block extra_javascript %}
    <!--HTMX-->
    <script src="https://unpkg.com/htmx.org@1.6.0" crossorigin="anonymous"
        integrity="sha384-G4dtlRlMBrk5fEiRXDsLjriPo8Qk5ZeHVVxS8KhX6D7I9XXJlNqbdvRlp9/glk5D">
    </script>
{% endblock extra_javascript %}
  • f
    its working but now the add function it self not working
  • l
    child html:
  • f
    And the server-side? Can't find any 
    hx-delete
    I would've expected for deleting the list element here.
  • f
    Just replace. 
    return context...
    . with 
    return HttpResponse(mark_safe('<script>setTimeout(location.reload(), 500)</script>'))
    after the form has been saved.
  • l
    the child html:
  • l
    the view:
1...363738...100Latest