https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • l
    If you want a client-side / event response example, this is what I use to display toasts with Bootstrap, and also intercept AJAX errors and display them. https://github.com/bit-badger/myWebLog/blob/5f3daa1de9062b4c1fe21cbfadcb442e78a7233e/src/admin-theme/wwwroot/admin.js#L340
  • t
    Bookmarked for later review
  • b
    Hi! Thanks for your help yesterday folks, I got the messages to appear!
  • b
    Now I want them to disappear after a delay of 3 seconds by using the remove-me extension [https://htmx.org/extensions/remove-me/]. For some reasons though, it does not seem to do anything
  • b
    Has anyone ever used this extension ? I tried defining it but it still does nothing
  • b
    Hey! Did anyone tried to add multiple instances of one Django form inside the other with HTMX? I've managed to do it visually, but I'm not sure how to process the forms (especially as it deals with files) My models:
    Copy code
    class Message(models.Model):
    date = models.DateField(default=timezone.now)
    message = models.TextField()

class MessagePhoto(models.Model):
    photo = models.ImageField(upload_to='memory_photos')
    message = models.ForeignKey(Memory, on_delete=models.CASCADE, related_name="message_photos")
    Main form template:
    Copy code
    <form method="post" enctype="multipart/form-data">
        {{ message_form.as_p }}
        {% csrf_token %}
    <div id="add-photo"></div>
    <button type="submit">Submit</button>
    </form>
    <button hx-get="{% url 'fragment_add_photo' %}" hx-target="#add-photo" hx-swap="beforeend">
        Add photo
    </button>
    fragment template for the photo form is just a form:
  • b
    Copy code
    {{ form.as_p }}
  • b
    The only problem I had with extensions was when I forgot to import the 
    .js
    file with the 
    <script>
    tag 🤦‍♂️
  • m
    I think nested forms are verboten by html
  • m
    I should doc that
  • m
    Did you include the javascript file for the extension?
  • b
    But it's not really nested since Django doesn't include in ModelForm render? So to HTML, it looks like one form, just made from two pieces?
  • b
    I tried both with and without defer
  • m
    One way to think of it is that the client is sending requests, rather than forms, to the Django backend. If you want your requests to have data in them then you can either: wrap a bunch of fields in a form element and post that form; or you can do a post request from any element (eg a button) and you use hx-include to specify which fields you want in the post request. The form way is like a shorthand for that. Does that help?
  • m
    I don’t do the form.as_p thing. I like to write all mine for some reason. If the as_p puts ids in the html, you’ll need to make it not do that. Maybe you could tell Django to add a time stamp string to any ids it includes in a form. Maybe use middle ware to do that? I’m not a Django expert though so those could be not great ideas 😂
  • l
    Hi everyone, I'm looking for a way to iterate through an API dynamically in my Django template. Any idea? I don't know much js
  • b
    Hi everyone I'm trying to build a similar search like remoteok.com, at first my app should show a initial query (list of jobs), and when I write something on my search box it should render the result, so far what I accomplished is this. 1. Inital page:
  • b
    2. after writing something:
  • b
    but I want my home page shows the list of jobs, how can I do that? I've been doing research I think I have to do a swap? on my production environment I have something like this->
  • b
    any feedback is very welcome 🙏
  • p
    make your job list view take a filter argument that limits the queryset that is rendered. Then point the 
    hx-get
    attribute on the search form to the job list view and make it trigger on 
    change
    . It should select the containing on the rendered view and put that in a target div.
  • w
    What @prehistoric-wolf-75047 said except I think the triggering event should be keyup rather than change. Preferably with a changed and delay modifiers added to it. So e.g. hx-trigger"keyup changed delay:300ms"
  • b
    Hello 🙏 , is there an easy way to refocus an input-element? something like hx-focus="#elementID" ? cant find anything working in the docs :/
  • m
  • b
    Thanks I think I manage to solve this
  • b
    that's exactlly what I did 😄
  • b
    The problem is, i have more then one dynamically created input-elements on the page. I was hoping for an easy way if element-1 makes an request, it auto-retargets element-1 and if element-2 makes an request it auto-retarges element-2 ... and so on. If there is no why with htmx i guess i need to add it with some form of JavaScript
  • g
    probably best to use the afterSettle event and a little bit of JS for that https://htmx.org/events/#htmx:afterSettle
  • a
    can I introduce you to https://hyperscript.org/?
  • b
    Thanks. i looked into that but it didn't worked. I try it again tomorrow maybe i need to use headers and some workarounds or just need to add pure JavaScript : /
1...787980...100Latest