Django and HTMX #1 - Introduction to HTMX and Dynamic AJAX Requests

hi there and welcome to this tutorial on htmx now hdmx is a new technology that's emerged recently and as it says in the documentation here it gives you access to ajax requests css transitions web sockets and server sent events directly in html which means that you don't need to write any javascript usually to accomplish some tasks that you would normally need to do with a library such as jquery now the main benefit of using hdmx is that it can simplify your architecture instead of using a library such as react or vue.js you can use and you don't need to manage that separate front end process and that could be very beneficial so let's go to the documentation here and we can see what htmlx offers now it allows you to access modern browser features in html directly rather than using javascript so it can simplify things for developers who may not want to write any javascript code so you can do things like send a post request on a particular trigger such as a click event or a key up or a mouse enter and you can target particular elements in the document and replace them with what is returned from the server so we're going to see in more detail what this means throughout the tutorial one of the important points though about an htmx application or an app that uses htmx is this paragraph here which says when you use hdmx on the server side you know you will respond with html instead of json normally an api would return json but in this model you're returning html fragments that are then placed into the document so we're going to see how to do that in this tutorial now i've got a basic starter application here that's on github the link will be in the description for this and this is a basic django app that i've set up that contains authentication such as a login form and a register form you can see that here we've got a basic homepage with some lorem ipsum and we have a login and a register form so what we're going to do in this video is we're going to go to the register form and we're going to wire up htmx to check whether a given username already exists or not and if it does exist we're going to show an error message saying that the username is not available so we're going to walk through the code using htmx on how to achieve that we've got a basic django app that you've cloned from github and it contains a few libraries django itself django extensions and django widget tweaks widget tweaks is something you can use here you can load in and render particular form fields and then attach things like classes and other html attributes so that makes it a bit simpler to work with forms in django on templates very nice library so what we're going to do now is we're going to wire up this username field and we're going to do an ajax request using htmx to check whether the username exists so let's go to the register form and we're going to check out the username field now currently this is the register form it's an html template in django and we have the username field here and we're currently rendering the field form.username and we're giving it the bootstrap class form control to give it some basic styling now what i want to do is now add some additional attributes that are htmx attributes and what we want to do is we want to send a post request with the value of the username field to a backend endpoint which will then check the username whether it exists or not and we want to do that every time the user types so for example if i was to type in mark every every single character that gets typed in here we want to send an ajax request so the trigger action is going to be key up okay so that's the first piece of the puzzle here we're going to add a few attributes in htmlx now the first attribute is the http method so it's going to be hx post because we're sending a post request and the value of that attribute is going to be the backend endpoint now we'll create this in a minute but let's say it's check username that's going to be the back end endpoint and we're going to trigger this action on let's say on key up every time a user will type in any character in the form now what i want to do now is i want to add uh an error div below this and i'm going to give that an id of let's say username error and that's just going to be empty for now because i'm going to set up a target here using the hx target and that means we'll cover what this means in a second but the target is going to be the username error and that refers to this div here so what we've got now is we've got the very basic attributes that we need here whenever a user types any key in the username field we're going to send a post request to this backend endpoint which we're going to create in a minute and that is going to target with the html that's returned from the back end it's going to replace the inner html by default within this div so the end of html will just be this here it's currently nothing but it's going to replace that with whatever is returned from the back end and that's what the hx target attribute gives you so what we need to do now is we need to actually go and create this backend endpoint check username so we can go to urls.pi and i'm going to create a separate um list here htmx url patterns and let's say that's an empty list and we're going to define the path and it's going to be check username and we're going to refer to views.check username and we'll give it a name of check username and then to our url patterns we can append these new htmx urls this is just a particular preference of mine you can do it any way you want now we need to go ahead in the viewers file and create this new view called check username so within viewers.pi we'll define this function that takes the request now this is going to be what deals with the htmx response it returns html that is then swapped into our hx target dev so what i need to do is get the user model so i'm going to import from django.contrib.org the get get user model function and within the check username field we're going to get the username attribute from the from the form and we can get that with request.post remember htmx is sending a post request and that's defined by the attribute hx post so we get the post data and we can extract the username from that and that matches um what's on the form if you look at the django forms dot pi it's going to give the red the username field the name of username which we can then grab on the back end so the next step is to check whether or not this username exists in the database so we'll call the get user model function which will return the user model that we're using in this application and then we can chain dot objects dot filter and we can check whether or not the username a username with the one that we've extracted from the uh post request exists in the database and we'll chain dot exists onto that to return true or false now if it does exist we want to return an http response and it's just going to be a string because we're just swapping a string into this div here so what we can do is we can just say if it exists this username already exists and then in the case where this username doesn't already exist we can return another http response and we can say this username is available so with that done we can save the register form and let's try this out now but we have missed one crucial step here so let's go back to the documentation um htmx in a nutshell down here you've got the installation we haven't actually added the script to our base dot html this project that we've cloned has a base html file which all the other html files extend and that just includes the navbar and some other things but what we want to do is include from a cdn and i'll just type htmx here the script tag containing the htmx source code so now that we have that we can save and we'll run the server it's already running we can refresh this now and hopefully this will work so if i start typing in mark we get this username is available and that's quite useful we haven't written any javascript code but this is already checking whether or not the username is available or not so what we can do now is we can register a user so we'll register mark so we've registered the user called mark now so if i go back to the register form and we type in the user mark here we see that the user name already exists so that's actually the ajax request is returning the fact that that exists and it's replacing automatically this message in the dom we haven't written any javascript this is very convenient for developers who want to create responsive applications and dynamic applications without writing complicated react code or view js code so hdmx by default takes the returned html and it injects it into the element that is specified by the hx target so we've got an hx target here of username error and that refers to this div here but what we can do instead is we can actually swap out the entire element and we need to add another attribute for for that so if i go back to htm x's documentation we've got this swapping section here so htmx offers a few different ways to swap the html returned into the dom by default it's inner html so for a div that would mean anything inside that div would be swapped out but there is another option called outer html which replaces the entire target so we can experiment very quickly with this if i specify hx swap equals outer html now what this should do is replace the entire div so what we can do is amend the back end response and replace the entire div so from the view dot pi the viewers.pi file we can actually return html directly and we can give it a style so let's say if the username already exists we can give it the style of color red um and then we can close that off and that should make the text within this um red so i need to use single quotes there and then we can do the same for when the username is available we'll make that green so we can make that green for okay and we'll close that div off hopefully this will work so let's go back to our form and refresh the page so you can see it's green when the user name is available but as soon as it becomes unavailable it will turn red because we're returning html that has a style attribute depending on the the condition it's going to be green or red so it's another useful attribute of hdmx is this hx swap it allows you to determine how is the returned html swapped into the dom so i think that's enough for this video and thank you very much for watching there will be a blog post on this topic and with many more videos on htmlx it's a very useful new technology that's becoming popular in the django community and in the python community so stick around for more videos if you enjoyed this one please like and subscribe and see you in the next video

Channel: BugBytes

Views: 2,367

Keywords:

Id: Ula0c_rZ6gk

Length: 12min 22sec (742 seconds)

Published: Mon Oct 25 2021