https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • m

    modern-doctor-63477

    03/16/2022, 10:48 PM
    Hi - I am having trouble understanding why hx-swap-oob is giving a NoTarget error. I am using htmx-swap-oob="beforeend:#map-{{map_uuid}}" trying to point to , a div that contains a set of forms you can drag around (like post-its, basically.) This is the higher template - I want to click the "+" button, and get a new form appended to the div containing forms: {% block map %} {{ formset }} {% endblock %} This is the form template, used on initially loading existing entities and reused for additional forms: {% load static %} <form class="card draggable" id="form-{{form.instance.pk}}" hx-post="{% url 'architech:updatetech' form.instance.map.pk form.instance.pk %}" {% if form.instance.name != "default" %} hx-swap="outerHTML" {% else %} hx-swap-oob="beforeend:#map-{{map.pk}}" {% endif %} hx-trigger="keyup delay:500ms" draggable="true"> {% csrf_token %} {{ form.name.errors}} {{ form.name }} {{ form.notes.errors}} {{ form.notes }}
  • m

    modern-doctor-63477

    03/17/2022, 12:23 AM
    Sorry, I've worked this one out. No need to go to swap-oob; because there's no 'inband' content to change the button, I can just target the div I want with hx-swap="beforeend"; it simplifies the form to be loaded too, because it doesn't need to have anything marked swap-oob. Next I need to work out how to add the js function that implements the draggability as it is loaded.
  • b

    blue-gold-89534

    03/21/2022, 10:05 AM
    has anyone ever dealt with django-eventstream (or other SSE)? I fail to find an htmx-like answer to a (I hink) quite obvious problem.
  • f

    fresh-judge-74869

    03/21/2022, 10:56 PM
    Guys good day to all I have an issue here. I'm using Django-widget-tweaks and Django-smart-select to render an input select option like this
    {% render_field form.test_lab hx-get="/orders/test_lab/unit_quantity_price/" hx-swap="outerHTML" hx-target="#id_order_items-{{ forloop.counter0 }}-price" %}
    but this is not working
    hx-target="#id_order_items-{{ forloop.counter0 }}-price"
    cos I'm trying to render an inline_formset_factory and try to target each item
  • f

    fresh-judge-74869

    03/21/2022, 10:59 PM
    I'm trying to do this:
    Copy code
    <select name="order_items-{{ forloop.counter0 }}-test_lab" hx-swap="outerHTML"
          hx-target="#id_order_items-{{ forloop.counter0 }}-price"
          x-get="/orders/test_lab/unit_quantity_price/" class="form-control chained-fk"
          id="id_order_items-{{ forloop.counter0 }}-test_lab"
          data-chainfield="order_items-{{ forloop.counter0 }}-characteristictestlab"
          data-url="/chaining/filter/tests_labs/TestLab/characteristic/orders/OrderItem/test_lab"
          data-value="null" data-auto_choose="false" data-empty_label="--------">
          {% for value, key in form.test_lab.choices %}
               <option value="{{ value }}" {% if form.initial.test_lab == value %} selected {% endif %}>
                   {{ key }}
                </option>
          {% endfor %}
     </select>
    but is not optimal does anyone knows how to add an iterate attribute inside the render_field of widget-tweaks to add an htmx attribute?
  • h

    hundreds-camera-24900

    03/22/2022, 12:02 AM
    I've never used that lib 😦
  • f

    fresh-judge-74869

    03/22/2022, 12:18 AM
    or maybe in the other way how can I make a htmx-trigger event when the select option is changed? for example when I change a product in a form the price thigger the change and update the value price? can you give me some advice?
  • h

    hundreds-camera-24900

    03/22/2022, 12:19 AM
    oh that was just talked about in main
  • h

    hundreds-camera-24900

    03/22/2022, 12:19 AM
    let me find the link
  • h

    hundreds-camera-24900

    03/22/2022, 12:19 AM
    https://discord.com/channels/725789699527933952/725789747212976259/954802733347635240
  • f

    fresh-judge-74869

    03/22/2022, 12:28 AM
    thanks @hundreds-camera-24900 I going to read it and give it a try, one more question what package do you use for chain select options
  • h

    hundreds-camera-24900

    03/22/2022, 12:29 AM
    how is that different than select_related
  • f

    fresh-judge-74869

    03/22/2022, 1:55 AM
    I'm reading about select_related but do you have an example of how to use it in dropdown related in forms by the way the link about hx-swap-oob is a plus thanks
  • h

    hundreds-camera-24900

    03/22/2022, 2:01 AM
    select related is just a server side technique
  • h

    hundreds-camera-24900

    03/22/2022, 2:01 AM
    to chain together a select and add joins
  • f

    fresh-judge-74869

    03/22/2022, 3:15 PM
    how can I achieve this 👇🏾
    Copy code
    {% for u in formset.forms %}
         {% render_field u.name hx-target="name-{{forloop.counter0}}" %}
    {% endfor %}
  • b

    blue-gold-89534

    03/22/2022, 8:53 PM
    hm ... you are missing the htm part of htmx there
  • b

    blue-gold-89534

    03/22/2022, 8:56 PM
    are you sure render_field works in a way that it embedds the htmx-attributes correctly into the generated html?
  • b

    blue-gold-89534

    03/22/2022, 8:56 PM
    how does the output of this in the webconsole look like?
  • f

    fresh-judge-74869

    03/22/2022, 10:37 PM
    now I'm trying to do this 👇🏾 and its working but still I need to put some string characters before the loop hxtarget=#name-forloop.counter0 @User @User
    Copy code
    {% with hxtarget=forloop.counter0 %}
    {% render_field form.test_lab class="form-control" hx-taget=hxtarget %}
    {% endwith %}
  • g

    gorgeous-airport-54386

    03/22/2022, 10:38 PM
    Copy code
    {% render_field u.name hx-target="name-" + forloop.counter0 %}
  • f

    fresh-judge-74869

    03/22/2022, 10:57 PM
    not working output error 👉🏾
    'render_field' tag requires a form field followed by a list of attributes and values in the form attr="value": +
  • f

    fresh-judge-74869

    03/22/2022, 11:58 PM
    Copy code
    {% with hxtarget="#id_order_items-"|add:forloop.counter0|add:"-price"%}
    {% render_field form.test_lab hx-target=hxtarget %}
    {% endwith %}
    Does anyone knows why the output of the render field is hx-target="-price" and the forloop.counter0 is not working?
  • f

    fresh-controller-36545

    03/23/2022, 8:56 AM
    Oof. Better create your own template tag at this point.
  • f

    fresh-controller-36545

    03/23/2022, 8:57 AM
    Or just use
    {{ form.field.auto_id }}
    instead.
  • f

    fresh-judge-74869

    03/23/2022, 3:35 PM
    thanks to @User & @User I could iterate inside the render_field
    Copy code
    app/templatetags/extra_tagas.py 👈🏾 create a simple tag two add two strings (StackOverflow search)
    from django import template 
    
    register = template.Library()
    
    @register.filter(name=addstr)
    def addstr(arg1, arg2):
        """concatenate arg1 & arg2"""
        return str(arg1) + str(arg2)
    Copy code
    inside the form 👈🏾 **{% with hxtarget="#id_order_items-"|addstr:forloop.counter0|addstr:"-price" %}** so you can pass to the render_field **hx-target=hxtarget**
    {% with hxtarget="#id_order_items-"|addstr:forloop.counter0|addstr:"-price" %}
    {% render_field form.test_lab hx-target=hxtarget class="form-control" hx-swap="outerHTML" hx-get="/orders/test_lab/unit_quantity_price/" %}
    {% endwith %}
    thanks
  • p

    plain-kangaroo-26043

    03/24/2022, 7:54 PM
    @User the "add" filter will just return an empty string in case of exception: one value might be a str and the other int (forloop.counter0) so it cause a TypeError.
  • p

    plain-kangaroo-26043

    03/24/2022, 7:54 PM
    https://github.com/django/django/blob/94d8ed55fa8e181b98f818a1b2805c66943cfeec/django/template/defaultfilters.py#L721
  • p

    plain-kangaroo-26043

    03/24/2022, 7:55 PM
    so you end up with an empty string "" being added to "-price"
  • e

    eager-lighter-51415

    04/06/2022, 4:41 PM
    hello guys, I need some help 😢 I am working on a project where I have a form that send a hx-get request using some input elements. These elements/attributes are used for data filtering. One of the input element is a "datetimepicker", and I would like to trigger the htmx request only when the "datetimepicker" is closed, not while the user still selecting the date & time.
1...555657...100Latest