https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • b
  • f
    Thanks!
  • n
    Howdy all, hoping to be able to use HTMX with my django for an autocomplete. I did some searching through this Discord and didn't see much to help me. The ask is to query my database while typing into a field to return possible matches. This part is working! I then want to be able to select one of those matches and have it fill in the input field. I am not doing so well here. I am also using Materialzecss which may be my issue. Current code:
    Copy code
    html
**dog_list.html** -- page you visit
<!DOCTYPE html>
<html>
{% extends 'main/header.html' %}
{%  load static %}
{% block content %}
<section class="col-4 offset-1">
    {% include 'main/search-males.html' %}
</section>
{% endblock %}
</html>
    Copy code
    html
**search-males.html**  --performs the search with view "search_dogs"
<script src="https://unpkg.com/htmx.org@1.6.1"></script>

<div class="d-flex justify-content-end mb-4">
    <form>
    {% csrf_token %}
    <input type="text"
        hx-post="{% url 'main:search_dogs' %}"
        hx-target='#males'
        hx-trigger="keyup changed delay:500ms"
        name="searchmales"
        class="form-control-sm mr-2"
        placeholder="Search Males..." />
    </form>
</div>
<div id="males"></div>
    Copy code
    html
**search_results.html** --displays the results of the search. This is where I would need help.
{% if maledogs %}
    <div class="container">
            <ul class="list-group col-xs-12">
                {% for male in maledogs %}
                    {% if male.sex == "male" %}
                        <li><a href="#!" class="blue-text">{{male.registered_name}}</a></li>
                    {% endif %}
                {% endfor %}
            </ul>
    </div>
{% endif %}
    Image of the result:
  • n
    As you see, the method I'm doing here displays the results as a list beneath the input field. I'd prefer this to be options for an autocomplete and once selected it would fill the input field in. Later I intend to have a submit button to send the selected input off to another view
  • n
    I'm somewhat new to this whole thing so I might be missing an easy answer. I appreciate any pointers!
  • l
    @User I would use select2 and have Django return json for this (but I haven't used htmx much). I'd also be interested to see if there's a nice way to do it in htmx.
  • l
  • l
  • n
    Thanks Cap, I do actually have a somewhat working example of the value-select. I just don't like the way it looks: starting with an entry field, start typing a name, the drop-down appears with the options. I suppose I could use this and then have the form action grab from the drop down, but imo it is ugly. Here is an example completing this ask with materializecss's "autocomplete" (https://materializecss.com/autocomplete.html ) and some javascript. It's very hamfisted as I pretty much return the entire database to the array, and then the autocomplete searches on that array. The DB is huge, so it's like 5 seconds to load this page!
  • n
    I wonder if I can find a way to mesh the return from htmx into what i'm doing with materialize and javascript. The problem is trying to take over that entry field.
  • l
    Why are you returning the whole database? I think your 
    main:search_dogs
    should be filtering on the value of 
    searchmales
    and returning just the results from that.
  • l
    In your template, is 
    maledogs
    all the dogs from the database, or the result of filtering by 
    searchmales
    in your view?
  • l
    I'd have an 
    if
    in your template if I wanted conditional behaviour for example, adding a class to the HTML for some some rows. But for what you have there (all or nothing), you're better off doing this in the view, so it's done at db level. Something like:
    Copy code
    def search_dogs(request):
    ⋮
    male_name_filter_str = request.POST['searchmales']
    maledogs = Dogs.objects.filter(registered_name__startswith=male_name_filter_str, sex='male')

    return render(response, 'main/search-males.html', {'maledogs', maledogs})
  • n
    The result of 
    searchmales
    is indeed the result of a very similar query occurring in the view. With nearly the same render returned.
    Copy code
    python
query_males = request.POST.get('searchmales')
if query_males:
    maledogs = Dogs.objects.filter(Q(call_name__icontains=query_males) | Q(registered_name__icontains=query_males) | Q(owner_name__icontains=query_males))
    That thing works fantastic with the htmx. handling the query dynamically. Smooth, fast. My example of loading the whole db is just because I can't figure out how to do the auto-complete with materializecss and jquery, so I send it the whole database. This is the HTML for that example (condensed to the main parts). In this case, 
    dogs
    is my entire db.
    Copy code
    html
<form method="GET" action="{% url 'main:test_complete' %}">
    <div class="input-field col s12">
              <i class="material-icons prefix">search</i>
              <input name="sireid" value="{{request.GET.sireid}}" type="text" id="sireid" class="sireid">
              <label for="sireid">Enter Male Registered Name</label>
    </div>
</form>

 <script>
   var sires = {
    {% for dog in dogs %}
        {% if dog.sex == "male" %}
            "{{ dog.registered_name }}":null,
        {% endif %}
    {% endfor %}
  }

$(document).ready(function(){
$('input.sireid').autocomplete({
        data: sires
  });
});
</script>
    I have tried copying the above and switching it up a bit to use the value of 
    searchmales
    and I can't seem to get it to function correctly.
  • n
    You know I guess in htmx terms, I'm looking for a 
    select
    built off of a 
    active search
  • p
    Please, I need a boiler plate with authentication, password reset and all basic stuffs implemented already. Anybody have an idea of where to get one?
  • b
    For Django? https://django-allauth.readthedocs.io/en/latest/ is a good place to start.
  • b
    No htmx in there though
  • w
    Hello, learning web dev, loving django and DRF, and found out about htmx today. How are people typically combining django and htmx? Does it work with a restful backend, or do you write full-stack django with templates as above?
  • w
    Also - unrelated sorry - can anyone recommend any django/django learning servers on discord?
  • b
    You write an HTML REST API
  • b
    I would say you don’t need DRF if you’re using htmx. You can add it to the standard templates instead. Have a look on YouTube - there are some djangocon talks that show how people are using it. I’m in the middle of rewriting my existing app. The current one is DRF on the backend with Ember JS on the front end. (The DERP stack: Django, Ember, REST framework, Postgres). I’m rewriting with FastAPI, Jinja templates and htmx. (I’d be using Django if there was a better SSE story for it.)
  • b
    I’ve not found anything on Discord but the Django IRC room is very helpful
  • w
    Thanks 🙏
  • b
    @User if you want an example : https://github.com/guettli/django-htmx-fun
  • f
    Alright, I'm at a loss--trying to get Click-to-edit working, but once I've made my changes in the form, submitting it doesn't do anything? I see no errors in the JS console, and there are no requests coming through to Django in `python manage.py runserver`'s output. Here's the partial for the form:
    Copy code
    <tr hx-target="this" hx-swap="outerHTML">
<form action="" method="POST" hx-post="ingredients/htmx/edit/{{ ingredient.pk }}">
  
  {% csrf_token %}
  
    <td>{{ form.name }}</td>
    <td>{{ form.quantity }} {{ form.unit }} (s)</td>
    <td>${{ form.price_per_unit }} / {{ ingredient.unit }} (s)</td>
    <td>
      <div class="btn-group">
      <input type="submit" value="Submit" class="btn btn-success" />
      <button class="btn btn-danger" hx-get="/ingredients">Cancel</button>
      </div>
    </td>
  
</form>
</tr>
  • h
    you can remove the method and action attrs in the form right?
  • f
    Sure, though that doesn't seem to make a difference. I think htmx is missing the form submit event, for some reason. Is there any reason it wouldn't be listening for it?
  • h
    hm bummer I thought you might be seeing html and htmx fight over who gets to submit
  • h
    no as far as I can see it looks right
1...222324...100Latest