html
# index.html
  <button hx-post="/clicked" hx-swap="afterend">
    Click Me
  </button>

# clicked.html
{% block content %}

{% for call in service_calls %}
    <h3>{{ call.date }} from {{ call.callers_name }}</h3>
    <p>{{ call.note }}</p>
    <mark>
        {% if call.rma is not None %}
            RMA# {{ call.rma }}
        {% else %}
            RMA not issued.
        {% endif %}
    </mark>
{% endfor %}

{% endblock content %}

py
# urls.py
path('clicked', test_view, name='clicked'),

# views.py
csrf_exempt
def test_view(request):
    if request.method == "POST":
        greeting = "Hello Post Method!"
        service_calls = ServiceCall.objects.all()

    context = {
        'greeting': greeting,
        'service_calls': service_calls,
    }

    return render(request, 'clicked.html', context)

Got it. Switched from hx-swap to hx-target and then cant tell the difference

I think it was one of his django-filters tuts

Agreed that doing it that way is not a best practice, however for someone with a basic Django understanding, they are the best tutorials I have found to get started. I would probably class myself as more of a hack, than a dev, so I could well be wrong.

I need to figure out whether with htmx or even just django how to make things append to urls. Like if I already have a page:

localhost:8000/records?query=1

I'm not sure how to create a view or even link that keeps that but adds onto it like

localhost:8000/records?query=1&sort=date

I use this + a hacky function to maintain the url between pages

hmm so i have a template like so:

html
<!-- equipment_service.html -->

    <h2>Search for Service Calls</h2>
<form action="{% url 'search_enclosure_service' %}" method="get">
    <input type="text" class="form-control" name="query" placeholder="Exact enclosure serial number">
    <button type="submit" class="btn btn-primary mt-4" value="Find By Enc">Find Enclosure</button>
</form>

<!--
at this point it has a get request on the url which is equipment serial number
localhost:8000/servicecalls/?query=123456
-->

{% for call in service_calls %} 
{% if call.return_manufacturer_authorization %}<button hx-get='/clicked' hx-target='#firsthtmx'>{{ call.return_manufacturer_authorization }}</button>{% endif %}

<div id='firsthtmx'>
</div>

I have a basic view that sends "Hello World" to the firsthtmx and its working. But now I'm trying to figure out how to send the RMA through the button to the view.

Anyone done this tutorial lately? when I get to 26:03 I'm not getting the form to appear. Not sure if something has changed in the last 2 years, I've checked my work four times and can't find any typos or errors. I'm not getting any Terminal or Console errors.

Hey all, hope you are doing well ! I used django, htmx + 3rd party intergration, namely simple-datatables library. It works well but I have some problems during sorting the table. Sort works well in front, it changes rows and all values but when I click on edit button it uses previous ID which was after loading the page. Do you know how to fix it ?

htmx.onLoad(function (content) {

        [].slice.call(content.querySelectorAll('#datatable')).map(function (element) {
            new simpleDatatables.DataTable(element, {
                sortable: true
            });
            htmx.process(element);
       });
   });

<button class="btn btn-sm btn-warning" hx-get="{% url 'edit-product' pk=product.id %}" hx-target="#dialog">Edit</button>

Django-components has 499 stars, in case anyone wants to be lucky number 500

502 - bad gateway. 😂

Surely it’s bad luck for web stuff to be in the 500 range. Got to get those numbers up!

https://github.com/PyHAT-stack/awesome-python-htmx, see message above for more context

Hi! I am having trouble getting the FilteredSelectMultiple widget to work within an HTMX partial. I have the FilteredSelectMultiple widget working correctly outside of HTMX, but the need to reinitialize any js within an HTMX partial is really throwin me for a loop. I have been able to get the widget to appear, but then trying to add a selection or filter fails. Also, are there any alternatives to using the FilteredSelectMultiple widget, particularly any that don't need js? Is there a way to write a replacement that uses htmx?

There's the

htmx.onLoad()

event that'll probably let you reinitialize the JS when the partial is loaded in.

Alright so continuing with boost issues, when I have

hx-boost

enabled, whenever I load a new page, this

div

is sent from the server as part of the template, but ultimately

htmx

removes it from the template (and yes it's an empty div), any idea why?

<div class="toast-container position-fixed bottom-0 end-0 p-3 mt-7" id="toast-messages" hx-swap-oob="beforeend:#toast-messages">
</div>

I'm definitely coming to realize the limitations of using boost on pages! It seems to introduce all sorts of unexpected complications.

Is django the "ideal" framework to be using with htmx? Seen a lot of videos from BugBytes on it, and also this is the only channel with a 🔥 emoji :P

htmx is completely backend agnostic, django is given a bit of special kudos here because djangocon 2022 had so many htmx panels- it was pretty much the first ad-hoc htmx convention lol. also django adoption has been pretty insane, with even mozilla pulling it into their standard django stack for all of their sites.

if your server can output html, it can use htmx.

@billions-window-36824 I would recommend looking through https://github.com/PyHAT-stack/awesome-python-htmx. Specifically https://github.com/spookylukey/django-htmx-patterns and the BugBytes series are great resources. @refined-waiter-90422 is of course correct, anything that can output html, can use htmx, but Python, and Django specifically, have the largest community of htmx users AFAIK, and the tooling/design patterns are most mature and discussed here.

I am having a partial template deliver a chart made with chart.js - the js code is in that template under

{% block js %}

within a ``and the library static files are defined in the

base.html

. When I just paste the example from charts.js page:

<script>
        const ctx = document.getElementById('myChart');
      
        new Chart(ctx, {
            type: 'line',
            data : { labels : [ 1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050 ],
                     datasets : [ { data : [ 186, 205, 1321, 1516, 2107, 2191, 3133, 3221, 4783, 5478 ],
                                    label : "America",
                                    borderColor : "#3cba9f",
                                    fill : false}]
                   },
            options : { title : {display : true, text : 'Chart JS Line Chart Example' } }
        });
      </script>

I get a lot of

caught SyntaxError: Identifier 'ctx' has already been declared

. the

<div>

around the chart html has

hx-preserve = True

set. Nevertheless I get the error whenever something loads on other parts of the page.

How would I avoid that error and make sure the element is destroyed upon closing that partial html?

Hi! I need help on this, I'm not sure if I'm doing it the right way anymore. I have a drf based microservice that is part of a project we're working on, we send a list to the API endpoint and it returns with a response of all the results needed, but the load time is much given that the list might be as long as having a hundred entries and it takes like .5 seconds for the microservice app to process the list item. Thats like 20seconds load time for 100 items in the list, we want to port the app to return a response for each list item once it's done processing it, so users wouldn't have to wait 20 seconds to receive a response for a hundred items when they can actually receive new response every .2 seconds, I also don't want to send 100 requests to the backend, I want to send the list at once then receive an updated response every .2 seconds. Presently, I'm planning to use django channels and HTMX websocket plugin, but I'm just thinking if this is right, plus the complexity of adding a redis db and all makes it seems like the wrong option. I'll appreciate any help rendered

taking 0.5 seconds to process a single item seems to be the real issue in there, and unless there is some heavy processing that justifies that, any other solution seems like workarounds around it

Sticking a cache like redis in front is good but first step imo: double check to make sure there are indexes on the columns you're querying, double check those ORM calls for slowdowns. Django ORM is notorious for querying all your relations in a blocking way.

agreed, sounds like N+1 query problem at first glance