65 - Dynamic New Forms in Django Formset via HTMX - Python & Django 3.2 Tutorial Series

so one of the questions you might be asking yourself is why even make your web application dynamic especially when it comes to dealing with the complexities of adding something like javascript well part of the reason is because it just adds a nice fluid experience for your end users and the more fluid experiences you have the easier it is for your users to interact with your system the other thing is the frustration that might be felt when you go to save something and it reloads the page and maybe it takes a long time or maybe it doesn't give you all of the necessary errors quickly so those things in combination are really one of the reasons that you want to use this fluid javascript or these dynamic websites now another reason is actually displaying data so if you wanted this data item to change over time without the page refreshing how do you actually go about doing that and it's usually done through javascript or through tools like hdmx which we'll talk about in a moment so the dynamicness of actually adding content to a web page but also even being it'll save that content without refreshing that web page so let's go ahead and implement hdmx now this will allow us to do all of the things we've done so far and more without writing any javascript i think it's actually very very useful and so what we're going to do is follow their quick start of getting the script the actual javascript that they have on our page so we can write some htmx so let's go ahead and copy this and i'm going to bring it on over into base.html and put it right here so i'm using htmx version 1.5 but i would imagine everything i'm going to cover now and also in the future is not going to be a whole lot different than this because it's already pretty full featured as is and if it does change it's not going to be something that's going to relate to this most likely but if it does change it's going to be for the better so at the very least we will see generally speaking how hdmax works now and so let's go ahead and add one package into django which is pip install django dash h tmx and i'll hit enter and so in my case i'm using django hdmx 1.2.1 but of course if you have a newer version feel free to upgrade it and upgrade pip if you'd like so it's kind of up to you on how that works the main thing that we want to keep for sure is just this version of django and since i am using a new package here i want to update my requirements so we'll go ahead and add that django-hdmx in here okay so now that we have some of the basics of htms implemented let's go ahead and make sure that django hdmx is implemented by going into settings and into installed apps we're going to go ahead and add in django underscore htmlx and then we're going to go ahead and add in the h2mx middleware and if you don't know what middleware is i'll explain it once we get there for django hdmx so djangohtmx.middlewear.htmx middleware and when in doubt if these settings were to change they would be listed on the django h2mx repository so you can see some of the changes there as well as their docs but the actual django hdmx is not required it just makes things a little bit easier on us as we'll see in a moment okay so now let's actually use htmlx we're going to go to that create update page again and on our form element here it's going to be really simple it's literally just hx post and then the url so this command right here is telling htmlx hey send a post method to this url so it's kind of combining these two things right here so we'll go ahead and save that and now i'm going to go and update my page here i'm just going to go ahead and hit save now it says data saved but it also has two hello worlds that's kind of strange so let's go ahead and try this as pasta hdmx right and just make sure it did save i hit save it says hello world again so if i refresh that page those hello worlds go away and if i go into the admin it also is showing me that new changed value cool so what if i added ingredients the javascript is still there let's go ahead and do pasta noodles again or whatever and hit save now it seems like the data was saved it says data was saved let's take a look hey what do you know so that dynamic javascript still works with the htmx which should imply that other kinds of javascript will work as well one of the things that is kind of strange is when i do hit save it's saying hello world in the search bar over again so what's actually happening here well let's take a look at our rendered page here right so this entire render page what's actually happening is it's re-rendering this page over and over again now the reason for that it has to do with this command right here it's going to hx post to this current view which is of course this view right here and at the very end of this view we re-render that exact same page all over again so it's just continuously rendering that page now when i say rendering it's actually just replacing this entire form element with that re-rendered page and so if we look at the browser let's refresh in here and i'm going to go ahead and inspect the element i just want to see what happens to the dom or the the browser right here so i'm going to look at this form element okay i've got this form element scroll down i'm going to hit save and that form element is now replaced with our original template right so here's here's uh that form element again should be right here okay so there it is again i hit save again open it up and what do you know it's replaced again with that template element and so it's actually replacing everything from this create update including base.html now the browser is smart enough to know to ignore pretty much everything other than what's inside of the body content here so it's really just going off of that which i think is cool and also not cool but the django hdmx the actual middleware specifically gives us access to doing something like this so after this if statement here i'm going to go ahead and say if request.htmx now i'm going to return a different rendered template so i'm going to go ahead and say recipes and let's go and do partials sometimes you'll see that as snippets instead of partials but i'll leave it in as partials and i'll just give this forms.html with the exact same context okay so now what i want to do is create that template so inside of my recipes i'm going to go ahead and do partials and then inside there we'll go ahead and say forms.html and then this is a htmx rendered template save that back in here now we hit save boom that is an asynchronous javascript request that is ajax right there that happened but we didn't write a line of javascript we just used all of the things we're used to using when rendering content we let the browser and htmx handle everything else so this this little this little line right here is what did that and of course it replaced what's inside of this form element so if we look inside this form element let's take a look now we see that the actual form itself is still there so this is still technically a form and of course it's going to continuously render to this hx post now i'm not going to get into all of the htmlx details just yet but instead what i'm do is inside of forms.html the reason i called it that is i'm actually going to grab this entire form right here and bring it in right here so now if i save it and run this again and hit save what happens is it brings me back that same data or it seems like it does but it also does initialize a new form we'll solve that in a second but the idea here is it is actually saving this data so new htmlx i hit save and i look in here it is still that data if i refresh in here it should also still be that data the message is not coming through now why is the message not coming through well it's not rendering the same template it's rendering a completely different template like we went to a different page and originally our message was outside of that form now i'm going to just go ahead and put it inside of that form which is completely fine we save that and we refresh in here now i hit save and what do you know data saved and it will do that every single time now there are ways to improve this absolutely so that's not something i want to do just yet in other words ways to improve this particular message through hdmx and so what i do want to do is i want to change how this form is coming through so if i come in to my form itself the first thing is i'm going to change how it's rendered all together i can remove it now from the original view rendering and just use includes and recipes partials and forms.html now in this case i actually don't need to render anything else with it i don't have to say with form equals to form because i can just infer that with this includes tag right and so let's go ahead and take a look at this let's re-render or sorry not includes but include like that there we go and so let's jump back in and so now it's still rendering the same form but then when i actually go through htmlx it's only going to use that same form it's i only have one place to edit that form now and which is actually going to bring me to my next point which is these nesting of forms and forms so if i keep doing this this way it's going to keep nesting that form element which of course is not great so what we can do in here is we can say hx swap and do outer html and that means that the entire form is now going to be changed okay so if i click on this i can hit save and there it goes okay so yeah there's other ways to do that as well but now i'm not nesting the same form over and over again so that is also pretty nice now we have hdmx running it's now working and we also have a way to dynamically still add this data in so if i go to add more notice it still dynamically worked i'm going to go ahead and put in pico de gallo and some that's kind of a weird pasta but let's go ahead and hit save and what do you know it's working data is saved i refresh in here and so now it's showing me that it does work still hand in hand with that original data but now if i hit add more it doesn't seem to be working right so it's not necessarily going to be perfectly working with javascript there's still things that i would have to improve with the javascript itself for that dynamicness to work together but i actually don't want to use javascript at all for this same feature this same feature can be done with hdmx which is what we'll do next but the idea here now is we have a ajax form without writing a single line of javascript now ajax is not that hard to do with javascript but this is incredibly easy to do which is why i highly recommend you stick with htmx now one of the questions you might be wondering is can we actually change the view that's going to handle an hdmx itself so in other words this h2max post can go to a different view and the answer to that is absolutely it does not have to go to the same view that this is in right here [Music] you

Channel: CodingEntrepreneurs

Views: 2,185

Rating: 5 out of 5

Keywords: install django with pip, virtualenv, web application development, installing django on mac, pip, django, beginners tutorial, install python, python3.8, python django, web frameworks, windows python, mac python, install python mac, virtual environments, beginner python, python tutorial, djangocfe2021, digitalocean, production, python, django3.2, web apps, modern software development, trydjango2021

Id: h9sxlkdMTeA

Length: 12min 29sec (749 seconds)

Published: Sat Aug 14 2021