Modal forms with Django+HTMX
HTML-код
- Опубликовано: 3 июн 2024
- This video shows how to use HTMX to show Django forms in modal dialog boxes.
The solution presented here requires very few JavaScript lines, renders form errors nicely, and refreshes the main page on success.
The following blog post contains a condensed version of this video:
blog.benoitblanchon.fr/django...
The following GitHub repository contains a complete project demonstrating the technique:
github.com/bblanchon/django-h...
See also the follow-up video that shows how to display a toast: • Toasts with Django+HTMX
Contact me on Codementor for live 1:1 mentoring:
www.codementor.io/@bblanchon
Table of Contents:
00:00 - Introduction
01:26 - Presentation of the original project
03:30 - Tour of the initial code
08:18 - import HTMX's JavaScript
08:53 - Lazy load movie list
15:53 - Add a placeholder for the dialog
17:40 - Change form's CSS
19:11 - Move the form
21:52 - Show the dialog
28:06 - FIx dialog's Cancel button
29:24 - Perform POST request with HTMX
31:52 - Return an empty response on success
34:29 - Hide the dialog
42:01 - Update movie list on success
45:25 - Reset the dialog's content
50:28 - Support status 200
52:58 - Recap 
Наука
![Oscar Maydon x Junior H - Volver Al Futuro [Official Video]](http://i.ytimg.com/vi/sa52xabMSB8/mqdefault.jpg)
This is exactly what I was looking for, thank you so much. It gets a bit complex so thank you for explaining it in a simple and detailed manner. Great content.
Excellent! Thanks Benoit. I love your style. You are very confident and you go right to the issue. I love the way you left your little mysteries in the video, and took time to solve them. Thanks again!
You're awesome! Literally have been looking this up for the past week on getting it implemented in a project! Thank you so much Benoit! 🙏🙏
Thanks, Colin. It took me a while to find this pattern :-)
Let me know if you have any difficulty implementing it.
J'ai galéré à mettre en place mon formulaire dans un modal et que tout fonctionne parfaitement, jusqu'à que je tombe sur ta vidéo! Une perle! Merci beaucoup pour l'aide!
Very nice tutorial. Highly appreciated. Keep up the good work!! 👍
Merci Benoit pour ce tuto parfait!
That's great, do more of this django+htmx in the coming future.
Thanks a lot. I actually needed it for PHP but it's close enough to understand how it works
😁👍
Thank you very much for your video! I will try with my Django projects
What a great video! I actually implemented modals using django + htmx + tailwindcss this week and I'm surprised that my approach was really close to this one haha! Also, thanks for the heads up on how to listen for events. I kid you not I was just thinking about it this afternoon haha. Merci beacoup!
I realy like video edit at the beggining of video, explanation is great. I wonder why so few videos on your channel. I would like to see more of Python, Django and particulary HTMX Tutorials from you. Keep up the god work.
This tutorial is awesome! I've been looking for something like this so I could catch up with HTMX in Django. This is the perfect approach as many of us Django developers are looking for a way to integrate HTMX in our existing Django code. This could be easily renamed as a Django + HTMX tutorial as it would help people find appropriate content for starting with HTMX (in combination with Django)
Thanks!
Great job. I'm making a project with django+htmx+bulma based in your tutorial. I found only one problem: My modal dialogs don't keep open if found form validation errors (like unique=True field). The modal closes and the error is displayed in a partial form page with no css. Do you know how to keep the dialog open?
Hi bro! Want to say thank you for your article based on this video. Artice is preffered for me and that awesome!
Thank you, the tutorial is very nice.
Thank you, Master!
Merci Benoit !
htmx in very useful for django. thnx for all
Thanks for this! Been struggling with htmx modal forms for a week
You're welcome! Let me know if you have any remarks.
@@BenoitBlanchon Can you also show how to display success messages when movie added without page refresh? My success messages are now only showing when I click refresh
@@Youdude2, I'll try to make a follow-up for this video.
@@BenoitBlanchon Came here to ask the same question. I already have a custom middleware that will add messages to the context when using HTMX requests but only when request object is added to the returned response. It works fine when returning TemplateResponse or render() but it doesn't with HttpResponse so some kind of workaround is needed.
Here is the follow-up: ruclips.net/video/pAtrj8A-Kl4/видео.html
Hello, the course is very good. The problem was that after applying the changes, the pagination no longer works. How can this be fixed?
Very grateful, best regards.
I have reached 3:00 in this video so far. I will watch more soon.
*Goal:* Show a Modal Form when a button was tapped, and the modal form has 3 buttons.
When one of the buttons are tapped, then send the data to a queryset [ update an existing queryset ]. At last redirect to a url that are different.
It would be amazing to see examples of multiple modals stacked. Natively bootstrap doesn't support it but I've seen people doing very small tweaks to make it happen. This way we could add intermediary fields and populate the previous modal with the just added record creating the only (IMO) usable experience for forms. But struggling to make this. Thanks a lot for this video anyway.
Can you please give an example using datatables?
Awesome. I have used this method in several projects now. Benoit, could you do the same with the HTML tag as well? I need bigger dialog form than bootstraps Modal. Or is theere any other way?
You can use the same technique with a , you just need to call dialog.showModal() and dialog.close() in the event handlers.
I followed to the T but the modal is not popping up, if I inspect it it's there and everything loads up :(
you're the best
can something like this be done without javascript
Awesome!!! But I have this error : TypeError: __init__() got an unexpected keyword argument 'headers'
Very Nice tutorial. Highly appreciated. Can the same be done using crispy forms
I don't see any reason why this would not work with Crispy Forms.
I have an image field included in the modal form. In the template, I added the attribute hx-encoding="multipart/data-form" in the element. And in the view, I added request.FILES when declaring the form such that form = ProductForm(request.POST, request.FILES). However, when I tried to upload an image for the product using the modal form, and click on save, the image field has an empty value, and the image was not uploaded to the MEDIA_ROOT as defined in the settings. I got "204 No content" in the terminal/console.
It works fine using the admin page. Any thoughts?
Is it possible that you forgot to add the file field in the ModelForm?
Here is a fully functional example: github.com/bblanchon/django-htmx-modal-form/tree/bootstrap4-file-upload
The 204 is expected since that's the way we tell the front end to hide the modal.
@@BenoitBlanchon thanks, i forgot to include request.FILES in the product_edit view.. thanks much
I saw at 53:00 it says *Modal from,* same thing I keep doing is using *form* when it should be *from,* and *from* when it should be *form.*
Very nice reusable modal + htmx combo.. However, if you could make refinements such that when the user edited a movie, only the table row containing that movie will be updated, not necessarily refreshing all rows, e.g. instead of movieListChanged event in , it should be something like movieRowChanged event for . Is this possible?
You could change this event to be "movieChanged" and include some information about the movie in the event's payload.
For example, you could include the movie id or its URL so that HTMX can fetch the row from the backend; however, this requires adding a new view in Django.
Alternatively, you could include all the movie information in the payload and add some JS code to update the row. However, it means that you now have two pieces of code that know how to render a movie row: one in the Django template and another in JavaScript.
Honestly, this optimization isn't worth the effort: the performance improvement is marginal, but the damage to the code is significant.
If your table is too big, use pagination. If pagination is not applicable for some reason, I recommend that you forget about this Django + HTMX pattern and fall back to a more classic JS Frontend + REST backend approach.
@@BenoitBlanchon "Honestly, this optimization isn't worth the effort: the performance improvement is marginal, but the damage to the code is significant." - thank you for this.. I have actually tried to refine your code but was stuck.. so i think will have to rebirth..
I tried using your technique with datatables but it seems unstable - sometimes the datatable will work, sometimes not.. If i build the datatable in a single page, it will work as expected.. but when i inject the partial list via the , the datatable becomes unstable. I also tried to build the complete datatable in the list.html, replaced the targeted with a in the index.html but still doesn't work.
perfect
Thanks for this informative video,
is it possible to create an Excel-Like data entry table with htmx in Django?
if possible create a video for us on that
No, I don't think it's possible to do that with HTMX.
To create a data grid, you need to use a JavaScript library, like grid.js.
Every time a new modal is opened the background goes darker and darker. Is there a way to have the same background, even after opening and closing multiple modals?
The sample code doesn't have this problem: github.com/bblanchon/django-htmx-modal-form
Ensure you're swapping the "modal" and not the "dialog".
Hello sir,
Please your add post description htmx ckeditor
Thanks its perfect !! I added pagenation and each time that I click the next page, it will reload the same page. Any idea how to solve it ?
You can probably fix this issue with "hx-vals": htmx.org/attributes/hx-vals/
@@BenoitBlanchon not so familiar with it. maybe in your future video you can make whole package of datatables.net + pagenation 😎
In the select input the first option is something like "------------", that's quite annoying for me, do you know how could i change this first option to a personal message and make it hidden, selected and so?
docs.djangoproject.com/en/4.0/ref/forms/fields/#django.forms.ModelChoiceField.empty_label
@@BenoitBlanchon Thanks man, now i can edit the select option text but i'm getting mad about to set some attributes like hidden, the empty_label is visible and can't figure it out how to make it hidden.
Anyways, my modal form renders the entire object list inside the same modal when i click ok to create a new entry, any idea about it too? i'm going mad about that.
Sorry to bother you but i'm quite new on django, i'm trying to understand this process for one of my class exercises.
I'm sorry, @@z3r0krypt, but RUclips is not the right place for this type of assistance. If you want, I provide live mentoring at a very affordable price here: www.codementor.io/@bblanchon
Can't figure out how to keep the modal from closing when clicking outside of it. data-backdrop="static" in the modal div does not work :(
On Bootstrap 5, it's data-bs-backdrop="static"
@@BenoitBlanchon thank you so much!! You saved my day :)
You make really great tutorials so I don't understand why you stopped making videos but I want you to do a blogging theme with HTMX if possible
Thank
Awesome info about modals Thanks for the time and effort invested. I have to ask you. could you pls teach how to make two or three related dropdowns using HTMX using Django.
I'm using dependent/cascaded dropdowns/selects in my applications, but I still haven't found a satisfying solution. Be sure that I'll make a video once I find a clean and reusable technique.
@@BenoitBlanchon thanks man any hel is really appreciated, the best tutorial about modal forms in django and htmx.
@@BenoitBlanchon ers un genio carajo!!! You are a genius fuckk!!!
*Day: 2.*
So I ended at 4:01 today. Since I paused the video, and made my own *model.*
thx
Benoit!, thank you very much for this great video. I have been watching it carefully for some days now. But I have a challenge.
If there is an error on a popup page, where user_form.is_valid() is not valid and you return HttpResponse(status=204), how do you show the error message back to the user.
If I return redirect() to a template the error messages show.
Kindly help redirect me to a video that shows how to do this.
Thanks.
If the form is invalid, you must render the page as usual:
github.com/bblanchon/django-htmx-modal-form/blob/0c5246dc24c719dbdc07e511b807ef583eb33f68/movie_collection/views.py#L25
Don't know why but my views and urls are ok, i did the hx-get on tbody like you but can't get my info, i'm quite lost, checked everything, no error anyways and i can't take my data. Checked the network tab and nothing comes.
Oh man forget about that, sorry mate i'm super dumb in this hours of day, it's quite late here and my brain broken up, it was my fault, copy paste mistake when tried to get the script. You're making my day anyways with this video, thanks! :)
@@z3r0krypt I am having thesame issue but i have look at the code again no errors. Please how did you resolve yours. I ahve also change the version of htmx to hmtx@1.6.1 but it dont return the list
when using htmx to load "movie list" instead of "{% include ...etc%}" the size is increase too much, you can see the difference if the database have 1000 records for example.
very good and useful method, but if you have a file to load it will not be a works.
normal form use "multipart/form-data" to load files and the HTMX don't support it?
You can upload files with this technique. See: github.com/bblanchon/django-htmx-modal-form/commit/f7b86fec9e47937d71d73ac28ea2b13953b9f8db
Django and htmx is match made in heaven. Since I find django being too dependent to the anchor tag for triggering transactions.
I'm Ngoc, from Vietnam.
I thank you sir. You are really great tutorials Great, very helpful. How to upload files, image file on modal- HTMX. ???? Thank you
I didn't try but it should work as a regular Django view. As usual, don't forget to add enctype="multipart/form-data" to the form. Please refer to the official documentation for more information: docs.djangoproject.com/en/4.2/topics/http/file-uploads/
*Day:* 3.
So I ended at 5:20 today.
*Day:* 1.
So I ended at 4:00 today.
*Day:* 5.
So I ended at 20:10 today.
*Day:* 6.
So I ended at 21:40 today.
*Day:* 10.
So I ended at 48:00 today.
*Day:* 9.
So I ended at 37:00 today.
*Day:* 8.
So I ended at 31:40 today.
If using CVB, how can we add to the header the movieListChanged event? like this one in your FBV..
headers={
'HX-Trigger': json.dumps({
"movieListChanged": None,
"showMessage": f"{movie.title} edited."
})
})
I stopped using CBV years ago, so please forgive me if my answer isn't accurate. If you're deriving from FormView, you can simply override the form_valid() method and return the HttpResponse object shown in the video. If you're not using FormView, you'll have to override post() and do something similar.
Dear im triying to fix this issue in whole week. Can you solve this on bootstrap v5.2
bootstrap.bundle.min.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
at Ni._initializeBackDrop (bootstrap.bundle.min.js:6:52003)
at new Ni (bootstrap.bundle.min.js:6:50880)
at dialog.js:2:17
at dialog.js:16:3
The form doesn't load for me when I submit the form, I need to refresh the page to see the change:
views . py
*return HttpResponse(*
*status=204,*
*headers={*
*'HX-Trigger': json.dumps({*
*"profileListChanged": None,*
*})'*
*},*
*)*
home . html
**
*Solution Time:* It should be *from:body,* not *form:body.* I just read it now on the videos subtitles, and I was thinking; " I wrote *form:body,* maybe if I change it to *from:body* it will work ", and it did.
43:00, subtitles at the end
Check the network tab to make sure the 204 is actually returned.
*Day:* 4.
So I ended at 14:30 today.
*Day:* 7.
So I ended at 28:50 today.