Hi,

First of all, thank you very much for writing this article! https://blog.benoitblanchon.fr/django-htmx-modal-form/

In the very bottom, the link to your next article is instead linking to the same page. Thanks again!

Hi,

I am relatively new to django and javascript so this will likely be a relatively straightforward issue for you no doubt. I am receiving the error above when the dialog.js and toast.js is invoked. I am using the Hyper Bootstrap5 theme, loading the themes components through static rather than via CDN. I suspect that there is no access to the bootstrap components when trying to create an instance of modal, but I am unsure how to resolve this specifically.

Any advice you can provide is greatly appreciated.

Thanks,
Mitch

Hi again, I have another question/idea.
You basically use an Hx-Trigger attr to create a custom event, with a payload, and show that payload with htmx.on().

This way, you always have to create the Hx-Trigger attr in your view, which is a bit non-djangoish and, despite working, feels like a hack to me. I really want to use Django's messaging framework for that, and I recently had an idea, but can't get forther with that. Maybe you know how to.

• First, I would create <div class="toast"><div id="messages">...</div></div> tags which contains a typical Django message {% for ... %} loop and displays the messages.
• I would create then, as you did, a Hx-Trigger attr, just with an empty "showMessage" content
• using CBV, I override the dispatch() method (you can do that with a decorator etc in FBV to), so that if any messages are in line, the frontend gets notified:

if messages.get_messages(request):
    response.headers["HX-Trigger"] = "showMessage"

• When swapping per HTMX, this triggers your Js part which shows e.g. the .toast classes
• the HTMX/HTMX content contains a

<div id="messages">{% for message in messages %}</div>

wouldn't this be cleaner?

It should work in theory, but I can't get it to work... Any ideas?

Hi.
I love how this looks and works.
is there anyway you could show me how it could be done with bootstrap and jquery

H Benoit,
thanks for this great article, it freed my mind ;-)

A question rose up: You use the movieListChanged custom event and included it into the header. Do you add custom events per page, just for the things that are needed? Or do you recommend to create "generic" events (listUpdated) with attributes - to keep their list a little bit smaller?

I am considering this pattern in a larger (open source) application and just want to make the "right" decision.
Thanks again for your great code.

Hi,

Thank you very much for your articles and videos. They've been helpful as I've been learning how I like to add HTMX to my toolbox.

I think I've decided that I like the flexibility I get with Tailwind CSS and Alpine.js, and I forked your project to use that stack instead of bootstrap.

I did my work on the "tailwind" branch of my fork. I thought about offering it back as a PR, but the UI for that on github made it look like accepting the PR would apply it to your bootstrap5 branch.

It would probably be more useful if you wanted to just pull the tailwind branch into your repository. Please feel free to do that if you'd like to have a tailwind version next to the others.

Please also feel free to add another part to your articles or videos talking about this stack if you think it's worthwhile. (I have some ambitions of posting about it on my blog, but I've got a bit of a backlog there and may not get to it.)

Thanks again for putting together this demo and the two articles. They've really helped me understand the stack.

This code is great and versions have helped with lots of modals, but I found one flaw/issue. The if statement below fails to trigger if there is any content in the response, however if you have non-modal content included (ie an oob swap used for toasts or something) causes it not to fire (since there is a response). Any ideas on how to detect if there is no core swap response (ignoring oob content or otherwise)?

  htmx.on("htmx:beforeSwap", (e) => {
    // Empty response targeting #dialog => hide the modal
    if (e.detail.target.id == "dialog" && !e.detail.xhr.response) {
      modal.hide()
      e.detail.shouldSwap = false
    }
  })

Hello,
if I have <form method="POST">, form is submited fine, but if I have <form hx-post="{{ request.path }}"> form validation fails even I fill required form field (drop down)?
If I set all field optional, form is submited with defaul values even I filled all fields manually.

What could be the issue here?

Thank you.

had to run pip install django-widget-tweaks before I could run a successful pipenv command