Django, HTMX and Alpine.js - Modals and Forms

[@mirzaduman7233]

Most underrated Developer / KZbinr. Thanks for all these wonderful contents.

[@bugbytes3923]

Wow, thank you so much! Much appreciated and much more to come!

[@robhafemeister3100]

Another great video. The highlight of my day when I see a notification that there's a new BugBytes video.

[@bugbytes3923]

Thanks a lot Rob, that means a lot! I'm delighted you're enjoying the videos!

[@trondlillebo]

Awesome content. The HTMX, Alpine and Tailwind is a killer combo, looking forward to more awesome videos. Keep it up 👍

[@bugbytes3923]

Thanks very much, glad you are enjoying them!

[@AliHassan-wc6nb]

Thank You for creating these videos!

[@bugbytes3923]

You're welcome - thank you for the view/comment! :)

[@AliHassan-wc6nb]

​@@bugbytes3923can we export data in predefined layout templates? please do a video on reporting. Pulling huge data from django, like million rows without freezing UI. Exporting data to pdf and excel.

[@owenjones9640]

This is perfect timing: I'm working on adding a form in a modal dialogue to my current project, and wanted to use htmx and hyperscript, so this gives me some great pointers!

[@bugbytes3923]

Glad to hear it Owen! Thank you! (I'll put out some more hyperscript videos, with real-life examples, in the next few weeks)

[@amjadalikhan1194]

Thanks for you nice contents. Your the best mentor in youtube channel. Thanks for your nice videos

[@bugbytes3923]

Thank you!

[@ayubkara1092]

you deserve all the best , i really thank you

[@bugbytes3923]

Hey - thank you very much!

[@tmikulin]

great video and I like the Scottish accent!

[@bugbytes3923]

Haha, thank you Tomislav! Thanks for watching 👍

[@tmikulin]

@@bugbytes3923 was just thinking about doing an app, django+ tailwind+alpine seems a good combo....vuejs for a crud app seems 🤔 like a big hurdle? What do you think?

[@bugbytes3923]

@@tmikulin Vue is a nice framework for certain tasks. But for most apps I would stick with Django and lower-JS tools like Alpine/HTMX. You can achieve the majority of what Vue can do with those, and you can remove most of the complex JS tooling.

[@tmikulin]

@@bugbytes3923 tnx man!

[@amjadalikhan1194]

You always coming with good useful contents I appreciate your efforts making and sharing your knowledge with us

[@bugbytes3923]

Thanks for the nice comment!

[@axelb.2006]

top as usually. Thanks

[@bugbytes3923]

Thanks !

[@LanceIgor]

If you are wondering how to reset the form after you submit it, just give an id to your , e.g. id="ComplaintForm". Then in your submit button add the javascript reset function via semicolon, so it looks like this:

[@Herdogan80]

Another spectacular content. Thanks a lot.

[@bugbytes3923]

Thanks, glad you liked!

[@repotranstech]

Superb as always 👍

[@bugbytes3923]

Thanks!

[@wiki-infodevelopment3369]

like always the Top of the best

[@bugbytes3923]

Thank you so much!

[@abrahamngetich1415]

Great content bro.

[@bugbytes3923]

Thank you!

[@fidelischukwunyere3142]

This is great. Would like to be able to pass dynamic responses in the partials.

[@Peterstavrou]

I can't get enough of these tutorials! So grateful! From my understanding so far, you can do everything that we did with Alphine in this video with pure htmx right? Would Alpine just be a little cleaner or is it simply personal preference?

[@bugbytes3923]

Thanks a lot Peter! There are some benefits to doing the work client-side with Alpine - no requests to the server, so you're offloading some work to the client-side. For simple things like user behaviour triggering events, it can be helpful - see this video for more: kzbin.info/www/bejne/qne5n32clKxniqc There is a certain balance where, if you have a lot of client-side behaviour, a tool like Alpine can minimize the complexity a lot.

[@danfan4707]

Great video… I got it all working! One problem though: If you submit a complaint successfully, then immediately click the “Toggle modal” button, the form re-appears with the previously submitted complaint text and email. Is there a way to re-set the form with blank fields? I actually want to implement this on my project where you can keep adding assets to a site using this modal technique.

[@torkoff]

I was having the same thought. Here's how I did it: 1. Expand your x-data alpine.js section to be able to use methods: x-data="{ show_modal:true, form:{ 'email':'', 'complaint':'' }, toggle_modal(){ this.show_modal=!this.show_modal }, clear_form(){ this.form={ 'email':'', 'complaint':'' } } }" 2. Use x-model with the email and complaints fields. There some reference to "attr" in the django widget tweaks documentation ` {% render_field form.text|attr:"x-model:form.complaint" class="..........."%}` 3. When clicking the button, call the clear_form() method from alpine. Though, this could be improved since the form would get cleared even if there were errors and it wasn't actually posted. But good as an example I guess. 4. profit...? @BugBytes could be an idea to explore for other videos

[@timothymalahy7880]

I'm confused as to why we are putting it in index.html. Wouldn't this make more sense to be in a partial or something to that extent so it can be called on a whim?

[@timothymalahy7880]

Do you have a completed git repo for this video?

[@steogen]

Hi thanks for these tutorials! I'm coming back to this video after some time because I wanted to apply your solution to use alpine to close the modal after submitting the form. I noticed that while adding @click.debounce.2000ms="showModal = false" works just fine, this is not ideal when the user submits an invalid form. In that case the modal should remain open to show the form errors... is there a solution for that case?

[@SmartC2007]

I noticed this problem as well. Unfortunately I don't know the answer? Anybody?

[@brylie]

How can we display the form validation to the user? Showing the specific validation error would help the user submit the form correctly 🙂

[@bugbytes3923]

In that case, after instantiating the form with the POST data, if form.is_valid() returns False, we would return a partial with the form containing its errors in the context. Difficult to articulate that here but it should be quite simple to do. This video only presents a toy example, but you would definitely want to use your idea in a real app!

[@brylie]

@@bugbytes3923 yeah. One tricky part would be to conditionally render the form with validation errors in the modal or dismiss the modal if there is a successful POST.

[@bugbytes3923]

​@@brylie Very true. One way to do that, I think: if the form validation fails, your Django view could return a different partial/fragment containing the form element, rendered with the errors in the context, and the view could overwrite the hx-target to replace the form element itself. This feels slightly hacky to me, but I think it would work fine. You'd just need to add an HX-Retarget header to the response to update the target in the failure event. htmx.org/reference/#response_headers A better approach may be to restructure the page to avoid these issues, though!

[@mrmuranga]

thanks..tried getting the code on github ..please share the link..tks

[@bugbytes3923]

Hey, thanks. There's no link for this code - it essentially builds off a standard Django project, generated with the startproject command, with an app called 'core' that contains a templates directory. Apologies for there being no proper template to start from.

[@nhs2425]

How to pass pk ?