https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • f
    Got question about hx-push-url="true" I have list of articles that get replaced by "more articles" link. So if you click they load nice replacing the last bunch. I added hx-push-url so people can share links. This works as expected. You can share the link and it works. In my django code I check request.htmx and then load the partial template. But here is my problem: If I go to the details of the article and hit then the back button my django/wagtail code decides this is surly a htmx request and thus only loads the partial. def get_template(self, request, *args, **kwargs): if request.htmx: if request.GET.get("load") == "page_article": return "pages/story/index/_articles.html How can I make sure that the back button from detail to my Index page is not seen as request.htmx and thus the correct template is loaded?
  • a
  • m
    Hi all, glad to meet some django-htmx fans. I recently built a cli tool to start a django + htmx project with additional commands to download the latest versions of htmx and its extensions, which might be useful to some people here. https://github.com/Tobi-De/fuzzy-couscous If you take a look, feedback are greatly appreciated.
  • m
    Do some people here follow conventions or rules when using htmx with django? View names, templates, urls, etc. I know there is no consensus on this a this point rules, but this is just to get some ideas.
  • r
    Hello everyone, I don't know where this is but I wanted to ask because I'm having a problem. I have a form like below. if "Cancel Request" is clicked in the form, "deleteproduct" form element will be destroy. my problem here is that HTMX cannot work without (I hope not) a process like hx-post-get.... is there a solution for this? ```python {% csrf_token %} Are you sure you want to delete ""? Cancel Request Delete
  • l
    I remember guettli shared some naming pattern. See here: https://github.com/guettli/django-htmx-fun#naming-pattern
  • r
    Best resource I've seen thus far on patterns https://github.com/spookylukey/django-htmx-patterns
  • m
    Me too
  • jQuery and other JS libraries not executing on boosted pages
    b
    Hi all, I have a weird problem in my project which I can't seem to figure out. It's likely just something stupid - at least, that's what I'm hoping for. I have one page within my project which contains 1..n image galleries. I utilize JS libraries justifiedGallery, which needs jQuery, and lighGallery to render those galleries nicely. I include all JS libraries within my 
    <head>
    . I do not use 
    defer
    for htmx (1.8.5), jQuery, justifiedGallery or lightGallery. I try to only include libraries on an as-needed basis, so htmx is included on all pages, but jQuery, justifiedGallery and lightGallery are only included in my gallery page's 
    <head>
    . To render the gallery, as per the libraries' documentations, I put the following code below my images:
    Copy code
    html
<script type="module">
    $("#lightgallery_77877f03-bb81-4d96-8e0d-c87c52b6b622").justifiedGallery({
        rowHeight : 200,
    }).on('jg.complete', function () {
        lightGallery(document.getElementById('lightgallery_77877f03-bb81-4d96-8e0d-c87c52b6b622'), {
            selector: '.image-tile',
            plugins: [lgThumbnail],
            speed: 500,
            download: true,
            licenseKey: '0000-0000-000-0000',
        });
    });
</script>
    When I visit my gallery page directly (i.e. copy and paste URL into browser and press enter), everything works as expected - even with an empty browser cache to start with. When I visit my gallery page via a boosted link instead, on my first visit with a fresh browser cache, the gallery is not rendered correctly: Neither justifiedGallery nor lightGallery work at all. I get the following error in my browser console: 
    ReferenceError: Can't find variable: $
    in Safari or 
    Uncaught ReferenceError: $ is not defined
    in Firefox. The stack trace below that error refers to htmx.js, starting with line 1735. That line reads 
    parent.insertBefore(newScript, script);
    and is part of 
    function evalScript(script)
    .
    h
    • 2
    • 9
  • m
    I need to filter my database while live updating it too. However, the current rendering doubles the form and resets the filter to show all the data. How can I filter my data and update it at the same time filters.py
    Copy code
    import django_filters
from django_filters import DateFilter
from .models import CheckingStatus, Participant
from django.db.models import Q


class ParticipantFilter(django_filters.FilterSet):
    class Meta:
        model = Participant
        fields = '__all__'
    views.py
    Copy code
    def display_view(request):
    myFilter = ParticipantFilter(request.GET, queryset=Participant.objects.all())
    data = myFilter.qs
    return render(request, 'display.html', {'data': data, 'myFilter': myFilter})
    HTML
    Copy code
    <body>
          <form method ="get">
            {{myFilter.form}}
            <button class "btn btn-primary" type = "Submit"></button>
        </form>
        <br><br>

    <div id="table-results" hx-get="/display" hx-trigger="every 2s">

     <table border="1" class="table table-dark table-hover">
         <thead>
             <th>First_name</th>
             <th>Last_name</th>
             <th>Age</th>
             <th>Checking Status</th>
             <th>Time</th>
             <th>Date</th>
         </thead>
         {% for k in data  %}
         <tr>
             <td>{{k.first_name}}</td>
             <td>{{k.last_name}}</td>
             <td>{{k.age}}</td>
             <td>{{k.checking.checking_status}}</td>
             <td>{{k.checking.time}}</td>
             <td>{{k.checking.date}}</td>
         
         </tr>
         
         {% endfor %}
     </table>
    </div>
  </body>
    Thanks for your time
  • r
    Are there any big projects using htmx or is it only for small projects?
  • p
    Hello, if you want to include get parameters from your form, you need to add hx-include attribute to your "table-results" div. Also you probably don't want to rerender every 2s your form, so you can create a new template with your table only and modify your view. You have doubled form because you substitute your div with entire page
  • m
    If by project you include application/product then contexte uses it on their front end along with stimulus https://www.contexte.com/
  • m
    @melodic-advantage-28381 presented a talk about it: https://m.youtube.com/watch?v=3GObi93tjZI
  • c
    daily reminder of how effective of a programmer you can be with django and htmx. These two technologies fit so well together.
  • m
    Hi all! New to the server = ) I added infinite scrolling to my Django Blog using HTMX. I also just added a GPT integration using HTMX where I click a button and it generates a website title, slug, and metadescription based on the contents of my blog post! I really love HTMX 🥰
  • l
    Hi all: Need some help with checkbox validation. How to check if the checkbox is checked before submitting the form using htmx.
  • b
    Hey, does anyone know of any alternatives for 'django-render-block' (https://github.com/clokep/django-render-block/) (for template fragments for django) that works for nested blocks? i.e
    Copy code
    {% block content %} <- Works targeting this
   {% block fragment %} <- Can't target this without hitting an error
   {% endblock fragment %}
{% endblock content %}
  • b
    Not 100% sure what you mean by target, but I've used slippers and it's really nice https://github.com/mixxorz/slippers
  • b
    Hello everyone I am facing an issue with HTMX implementation with Django forms. I have implemented the HMTX in crispy form for user registration and it redirects me to the login form however, when I submit the login form it again takes me to the registration form again though the response from Django is to redirect the user to home page. My implementation to login form submit buttion is this:
  • b
    Copy code
    <button hx-swap="outerHTML" hx-target="login_form" type="submit" value="Submit" </button>
  • b
    My implementation in the Modelform for user registration is
    Copy code
    self.helper.attrs = {
            # Redirecting on the save to signup page again
            "hx-post": reverse_lazy("signup"),
            # To replace/swap the form with the information returned by django
            "hx-target": "#signup-form",
            # Ajax swap to replace the outer HTML (Avoiding placing html inside the target - form inside form)
            "hx-swap": "innerHTML",
        }
  • b
    Fixed the issue thanks a lot everyone
  • m
    I am currently using this JavaScript code in my Django app to dynamically count the number of characters in an input box. Could I do it in HTMX instead?
    Copy code
    js
function countCharacters() {
    function count(input, count) {
      const charCount = count.querySelector(".char-count");
      charCount.textContent = input.value.length;
      input.addEventListener("input", () => {
        charCount.textContent = input.value.length;
      });
    }
  
    const titleInput = document.querySelector("#id_title");
    const titleCount = document.querySelector("#title-count");
    count(titleInput, titleCount);
  }
  
  window.onload = countCharacters;
    Given this Django template. The first element displays the number of characters in the 
    value
    field of the second element.
    Copy code
    html
<p class="card-text">
  <span class="text-success" id="title-count">Title Characters: <span class="char-count"></span></span>
</p>

<input type="text" name="title" value="I am a 25 character title" class="form-control" autofocus="" maxlength="250" required="" id="id_title">
    Ideally, I could see myself using something like 
    hx-post
    to send the title to a view. Then the view would count the characters and send back a number. I would then use something like 
    hx-swap
    to swap out the textContent of the 
    char-count
    element. The only problem is that I don't know how I could make it so the element keeps updating with new content as the user types (basically listen to a keyUp event).
  • m
    Hey! I just implemented a character counter in HTMX and wanted to know what you guys thought of the way I implemented it. VIEW
    Copy code
    py
def count_characters(request):
    title = request.POST["title"]
    character_count = len(title)
    return HttpResponse(character_count)
    TEMPLATE
    Copy code
    html
<p class="card-text">
  <span class="text-success" id="title-count">Title Characters: <span class="char-count"></span></span>
</p>

<input autofocus="" class="form-control" hx-include="#id_title" hx-post="/count-characters/" hx-target=".char-count" hx-trigger="load, input" id="id_title" maxlength="250" name="title" required="" type="text" value="HELLO WORLD!">
  • m
    People are hating on it cause they think this should be client-side…but this is an admin-interface for me only and I personally don’t like putting extra JS imports or scripts into my Django apps. So there! I’m doing it server-side and no one can stop me.
  • e
    If it works, it works. Once performance becomes a concern, you’ll want to avoid an unnecessary round trip to the server because no data needs to be persisted here, and defer that kind of computation to the client.
  • e
    If you use serverless, this implementation will cost you real money
  • e
    Also, this can be done in a breeze with #796428329531605032
  • e
    Something like ‘on change put my.length into #length-container’s content’
1...899091...100Latest