https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • f
    In the end I went with Boostrap instead of Tailwind, and I pulled in (https://getdatepicker.com) from CDN.
  • f
    Problem solved, and I get to keep my low-JS solution !
  • f
    Do people here prefer to use django forms, or create their own HTML forms ? What's easier with HTMX?
  • h
    what version of django are you using? the past few versions have had a few significant improvements to form rendering
  • h
    so if you're using a newer one I'd use django forms and do a lot of default template overwriting
  • f
    I'm using the newest django
  • f
    Would you use something like django-crispy-forms? Or some other plugin? Or just what's built in is sufficient?
  • f
    It's my first project with django
  • f
    This is what I'm building.
  • f
    The region select is populated with data from an API, I don't have a region model. Same thing for the hypervisor select. It's populated from an API depending on the region.
  • f
    Finally the Template is a model, and some of those Templates have to show a DatePicker, some don't, depending on which Template is selected.
  • f
    @hundreds-camera-24900
  • f
    Copy code
    python
def hypervisors(request: HttpRequest) -> HttpResponse:
    region = request.POST.get("region")

    hypervisor_list = get_hypervisors(region) // API call

    return render(
        request,
        "partials/hypervisor-select.html",
        context={"hypervisors": hypervisor_list},
    )
  • f
    This is how I get the hypervisors for example. Side question: Is it worth it to create a model for this or is this fine ?
  • h
    I don't love crispy - I find it a little complex so I odn't generally use it. It's a fine choice if you like it though
  • h
    I don't understand what you're asking around creating a model - you mean the hypervisor list?
  • e
    I love the crispy form layout helpers, but only if there is a template pack available for your chosen CSS framework. I am happy to let crispy forms write my HTML. Form HTML is so mind-numbingly repetitive, especially if you're doing accessibility right with Bootstrap. Django forms work great with HTMX. One thing you can do is simply return the rendered form (with validation errors or with updates)
  • c
    I have a very basic question, just trying out htmx. I have a button:
    Copy code
    <button 
  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
  hx-post="{% url "listings:listing-favorite" listing.slug %}"
>
  Some text
</button>
    the post view returns some json like 
    {"added": id}
    or 
    {"removed": id}
    I would like to toggle a class on the button if the response is 
    {"added": id}
    . Is it possible to do?
  • b
    With htmx you'd return the HTML in the response that would get swapped into the DOM to replace the button, rather than using client side logic to render based on the response JSON.
  • c
    ok, so I'll return the exact same html button with the right classes
  • c
    I think hyperscript is the sister tool that could do that while avoiding the html swap.
  • h
    You could use https://htmx.org/attributes/hx-trigger/ to trigger different events
  • h
    but returning straight html is going to be easier
  • f
    Hello! I'm using HTMX to update the options in a bootstrap-select (https://developer.snapappointments.com/bootstrap-select/). My problem is that while the options are correctly added to the HTML in the select, the options don't show up.
  • f
    My field with HTMX attributes is rendered like this:
    Copy code
    html
{% render_field form.region class+="form-control selectpicker" data-live-search="True" data-style="btn-light" hx-post="/hypervisors-v2/" hx-target='#id_hypervisors' hx-swap="innerHTML" hx-trigger="change" %}
  • f
    And #id_hypervisors is rendered like this:
    Copy code
    html
{% render_field form.hypervisors class+="form-control selectpicker" multiple=True data-live-search="True" data-style="btn-light" %}
  • f
    And this is the HTML that my endpoint is returning:
    Copy code
    html
<option value="">---------</option>
{% for hypervisor in hypervisors %}
<option value="{{ hypervisor }}">{{ hypervisor }}</option>
{% endfor %}
  • f
    Ah, it seems to be a bug with the bootstrap-select (https://github.com/snapappointments/bootstrap-select/issues/2724) and dynamically changing it's elements, so I guess it's still relevant to HTMX!
  • f
    Has anyone used HTMX with django-widget-tweaks ? Did it work ?
  • f
    Weirdly, when I use HTMX to POST a form whose fields are rendered with {% render_field ... %}, the fields disappear when the swap is completed. In fact, the text inputs disappear, but the datetimepicker still appears. But both are rendered with {% render_field %}, so it's very weird.
1...737475...100Latest