django-htmx - Django Extensions for Working with HTMX

hdmax has given Django and other back-end developers an alternative to the complexities of modern JavaScript and in this video we're going to look at the Django HDMX package this is a package you can use in your Django projects and it gives us some back-end utilities that will help when you're working with htmx we're going to cover most of the main features of Django hdmix in this video so let's get started now we have the GitHub repository open here for the Django htmx package and I will link this below the video and we can follow the link in the readme to the documentation for Django htmx and we get these links here so what I'm going to do to start with is go to the installation page and I'm going to copy the PIP install command and I'm going to go to vs code and we're going to paste that pip install command into the terminal it's going to install Django htmx into our environment now in order to use Django htmx in a project what you need to do is go to the Django settings.pi file and we can go to the installed apps list at the bottom of that list we can paste in the Django htmx package as one of the apps that we're going to use in this jungle project and we also need to add a middleware to the list of middleware in the Django project so let's go back to the Django htmx documentation and we're going to add this middleware here it's called the htmx middleware so let's paste that into the middleware list and we can just add that at the bottom here make sure that's in a string and that is the main setup for Django htmx it's very easy to get up and running with this package now the htmx middleware if you go back to the documentation you can see a note here this middleware will add the request.htmx property to Django's request object we're going to dive into that property that's probably the most used feature of this Django htmx package so let's click this link and we're going to go to the middleware page and the main benefit of the request.htmx property is that your viewers can use that properly to switch behavior for requests that come from htmx and that's very important in your application if for example you need to return a different template based on whether or not it's an htmx request this request.htmx property is very useful for use cases like that now as it says above the metal wheel that we've added will attach the request.htmx property but that's an instance of the HTML details object and the HTML details object contains this thunder boom method which will return true if the request was made by htmx Otherwise false so we're going to use this object in our view now in Django I'm going to see how this works but the htmx details object has some other attributes that we're going to maybe look into a couple of those as well let's go to the templates directory and we're going to go to this index.html template that's being rendered by this view so let's go there just now it currently just says home now just below that I'm going to add an anchor tag here with an href that points to the index view in our application if we go to urls.pi the index view is our one URL pattern that we have in the application and that just points to this index view that we have here so what we're going to do now is we're going to start the Django development server so we can run Python manage.pi and the command is run server and we're now going to go and look at our application in the browser and you can see this is the page that we have here for the index.html template and we have the link here that we've added and when we click this link it's just loading the same page back to us so it doesn't do anything useful but we're going to use this link for demonstrative purposes throughout this video now if we go back to vs code you can see the links coming into that endpoint what we're going to do is change up this view a little bit and to start with we're going to print out the request.htmx object that's added by that middleware that we added to the settings and then we're also going to write an if statement here we're going to check if the request is coming from htmx so if it is an htmx request this property will evaluate to true and we're going to print out that it is an htmx request otherwise we're going to use an else Clause here I'm going to print that we are not dealing with in htmx request so let's now go back to the page and we're going to click this link that will reload the page basically but the request will still come into this View and you can see that we are not dealing with an htmx request here and that makes sense because we have an anchor tag that just has an href attribute we are not using htmx in any way at the moment you can also see the htmx details object that's printed to the terminal and remember the request.htmx property it is in htmx details object but it does have that thunderbill method so when we use it in an if statement it's going to evaluate to true or false and that's just a bit of python knowledge when you add a Dunder Bill method to an object or a class that class can then be used in if statements and will evaluate to true or false depending on your logic now what I'm going to do is go to index.html and we're going to change this attribute instead of using href we're going to use an htmx attribute and we're going to use the HX get attribute which is going to send a get request using HDMX when this link is clicked and we have an index.html that's extending a base template so let's go to base.html and what I'm going to do within the head tag here is add a link to the htmx CDN so let's go to the htmx documentation the installation section which I'll link below the video and we're going to grab the htmx source code from the CDN and we're going to paste that tag and into the head tag here and I wouldn't recommend using the CDN in production but for this tutorial we're just going to use the script tag within the head so that brings htmx into the project we can now use attributes such as the HX get attribute and that should work if we go back to the browser and go to our application and refresh this page and you can see we no longer have the styles for the anchor tag because we've removed the hrf but if we do click this tag you can see what we're getting back here is a duplication of the page and that's because the htmx request is going to a reviews.pi file and it's returning that same template and swapping it into the index.html and replacing the element that triggered the request which is this anchor tag here so that original anchor tag if you refresh the page will be replaced by again a duplication of the content when we send the HX get request but if we look at the terminal on the back end you can see that we now are getting an htmx request here we're getting the smiley face and that's because the if statement is evaluating to true and the middleware recognizes that the request is coming from htmx now there are other attributes on this request.htmx object and to demonstrate that I'm going to go back to index.html and we're going to add a button here just below the anchor tag so I've given this button an ID of random button let's copy that ID and I'm going to change the target of this htmx response to the HX Target equals random button and basically the HX Target is going to take the content coming back from Django and it's going to swap it into the Dom and it's going to replace the inner HTML of this random button and while we're on this page we're going to add an ID to the Anchor tag called htmx link which is going to allow us to refer to this anchor tag later on let's go back to our page and we're going to refresh the page now you can see we have a random button when we click the link you can see that the content is coming back and all of that content is switched into the inner HTML of that button not ideal here and of course you wouldn't do this in a real application this is just a toy example and we're going to use it to show the features of Django htmx if we go back to viewers.pi fail I'm going to clear out all of this code here and what we're going to do is we're going to print another attribute of the request.htmx object let's print out the Target and we're also going to copy that line down below and we're going to print out the trigger if we go back to our page and refresh this page when we click the link and go back to vs code you can see the target here is set to the random button and the trigger which is the second print statement is the ID of the element that triggered the htmx request so on the back end using Django htmx we can easily get access to the Target element where the content will be swapped into and we can also get access to the ID of the triggering element in this case htmx-link so it's very easy to get access to those values on the back end now there's one more property I want to demonstrate here so I'm going to change this back to an H riff and rather than defining an HX get we can also Define the HX boost attribute and set that to True HX boost can be used to progressively enhance areas of your website and what's going to happen now if we go to views.pi we can print out another attribute here and that is the htmx dot boosted attribute which is another billion attribute that tells us whether or not this request came from an element with the HX boost property set to True let's now go back to our page and refresh this page when we click the link again we're getting back the same response on the back end we are now getting true for the request.htmx dot boosted property so why make this structure be useful what we're going to do is remove the print statements and we're again going to bring back the if statement and check whether or not we have an htmx request and what we're going to do now if we do have an htmx request we're going to return a partial template that we're going to create in a second and that's going to be partial.html otherwise if we don't have an htmx request we can return the normal template so now we need to create partial.html so I'm going to create a new file within the templates directory and that's going to be called partial.html and this is just going to contain some dummy text so let's paste in a paragraph tag that contains some lorem Epsom text so now when we have an htmx request that's going to return the partial and it's going to be able to detect that using this if statement here and when the page first loads when it's not an htmix request the else block will be run and we will render the index.html page let's now go back to the web page and refresh again and when we hit new page this time the button is now getting its inner HTML replaced by that partial template which contains the lorem Epsom text and obviously this doesn't look great what I'm going to do to make this a little bit better is go to the template and this is the parent template we're going to replace the button with a paragraph tag and the ID of htmx content and we can then set the target of the response content to that new htmx content paragraph tag let's again show this we now have the new page link when we click that we just get back text which is swapped into the Dom and it's not going to be placed within the inner HTML of a button so in retrospect I probably should not have used a button for this but the important takeaway here is that the request.htmx property allows you in your views in Jan angle to detect whether or not a request is coming from htmx and then return the rate template or perform the right logic based on that knowledge what we're going to do now is look at the Django htmx HTTP module this is another module within the package and we're now going to walk through a number of these useful objects that is provided by this module so let's start with the HTTP response client redirect this triggers a client-side redirect when it receives a response with the HX redirect header and htmx provides this class which is a subclass of HTTP response redirect for triggering such redirects so let's copy the import into a reviews.pi file at the top here and let's create a toy example here when we have an htmx request what we want to do is redirect the user to the admin page so we can use that class that we've imported called HTTP response client redirect and we can provide to that redirect to a parameter and let's redirect the user to the admin URL so let's now go back to our page and we're going to click this link and you can see what actually happens now is that we're redirected to the admin page and that's because when we hit this view the request.htmx will evaluate to true and we will return an HTTP response client redirect to the admin that will then add a header to the response and it's the HX redirect header with the value of that header set to what we pass in which is the slash admin URL and then on the client side htmx will handle redirecting the user to the admin URL so this behavior on the client side is done via adding this header to the response let's move on to the second object that's the HTTP response client refresh now htmx will trigger a page reload when it receives a response with the HX refresh header and this class will allow us to send such a response and it takes no arguments since htmx will ignore any content so this is very easy we're going to bring the import in from the Django htmx.http module so let's replace the import at the top with the HTTP response client refer fish and then we can use that object within the if statement and we don't need to provide any arguments to it what this is going to do is add that particular header HX refresh to the response and that's going to tell htmx on the client side that we want to refresh the page that we're on so let's now test this out if we go back to our website when we click the link this time you can see we are actually getting the page refreshing we're not seeing the htmx response because that page is then immediately being refreshed and when it's refreshed that is sending a normal request to the back end not an htmx request and then that's going to reload the index.html template that you see in the else Clause now this class might be useful for example if you perform some sort of actions using htmx or if perhaps something goes wrong in your application and you just want to perform a complete refresh of the application at that point this object will add the headers to response that will let you do that on the client side and that will allow you to refresh whatever page you're on at a given time now of course this is not very useful at the moment on this page because it just refreshes the page doesn't do anything else but there are conditions where this can be useful let's go back to the documentation and we're going to move on to the HTTP response location and this class will add an HX location header and that's a header that makes htmx make a client-side boosted request acting like a client-side redirect with a page load now to understand this better I'm going to click this link and this is going to take us to htmx's documentation and this is about the HX location response header this can allow us to perform a redirection on the client side but it can do that without reloading the page so as normal with htmx it's going to perform that redirection with an Ajax request and an example here is if we return a header with the HX location set to slash test when the client receives that header it's going to act as if the user had clicked on a link with that particular href and the HX boost attribute set to true so let's go back to vs code and I'm going to add a new URL pattern to our list here and that's going to be for a success URL now let's see the user perform some sort of action and we want to redirect them to a success page but we want to do this using htmx and using a boosted request what we're going to do is go to viewers.pi now and at the top I'm going to import from the Django HTTP module the HTTP response class and we're going to define a very simple view just below the index view called success and that's going to return an HTTP response with the message congratulations whatever you were doing worked what we can do now is we can go to the index View and we're going to look at the if statement where we detect whether or not it's an htmx request and I'm going to remove this call here to the refresh and this time we're going to bring in the class from Django htmx called HTTP response location so let's bring that into the Imports and what we want to do is we want to return the HTTP response location and set that equal to slash success so this is going to tell the client that we want to perform a boosted redirect to this success URL and when HDMX sees that location header in the response it's then going to drag go and htmx request to a new URL here or New View and that's then going to return this content here to the client so let's see if this works at the moment we're going to go back to our page when we now click the link what's happening is we are getting back the success message and this is a client-side redirection if we go to the network tab on the browser and we go back to our original page here when we click the link you can see that we are actually sending two hxr requests to Ajax requests here so the page is not being refreshed this is a client-side boosted redirection and it's using htmx to load up the new content and it's also pushing something into the URL history as well so if you need to perform a client-side redirect using htmx and Django this utility from Django htmx here called HTTP response location can be useful Now by default the target for the boosted response is the document body as you can see here it's replaced the entire document with the response now that might not be what you want to do you may want to keep some structural aspects of your page for example a navigation bar at the top you might not want to replace that when you perform this client-side redirect so let's go back to our original page here and what we're going to do is we're going to set the link as the target for the response when we perform that client-side redirection and how do we specify that as the Target on the back end let's go back to the views.pi file and it turns out that HTTP response location class can take a Target keyword argument here and that can be set to the Target of the element in the document where you want the response content to be swapped into so what we're going to do is we're going to go to index.html and we're going to say we want to swap the response into this paragraph tag here and we can paste that ID into this target keyword argument and let's now go back to the page and we're going to see if this works when we click the link you can see that the response from the success endpoint is being swapped into that new Target which is the empty paragraph tag now I think the main use case of this functionality is if you had page on your website and perhaps you've got sidebars and nav bars and Footers and other structural elements when your user performs some sort of action and then they should be redirected to another page under certain conditions you can then use this HTTP response location and pass in the URL that contains the content they should be redirected to and you can provide a target for where you want that content to be swapped in and typically this might be somewhere in the body tag but not somewhere that's going to take away all of your structural elements on the page like the nav bars and the Footers and so on so I hope that makes sense for HTTP response location let's go back to Django htmx's documentation and this time we're going to look at a useful utility called HTTP response stop polling so when you're using a polling trigger htmx will stop polling when it encounters a response with the special HTTP status code 286 an HTTP response stop polling is a custom response class with that particular status code so let's copy the name of this class and we're going to go back to views.pi and I'm actually going to bring that in as well as response location we're also going to import HTTP response stop polling now htmx comes with some capabilities to pull a back end and you can do that using an HX trigger set to the every trigger and for example you can do the polling every two seconds and you can set that trigger equal to every two seconds in order to do that so let's go to our index template here and just below the paragraph what I'm going to do is add a div here and we're going to use the HX trigger attribute and set that equal to every two seconds and that's going to allow us to perform polling to the back end every two seconds we're also going to set here an HX Target I'm going to set that equal to our ID of htmx Dash content and that's the paragraph tag just above here now of course when we're doing this polling we need to Define where the requests are going to be sent and we can use the HX get attribute for that and I'm going to use djangles URL template tag here and let's set the URL equal to that new success URL that we just added on the the back end and I'm also going to add a swap mechanism here so let's set each X Swap and we're going to set that equal to before end so let's end the div tag and close it off here and this is then going to pull the back end every two seconds at this particular URL and the content that's returned every two seconds will be swapped into this Target and the swap mechanism is before end which means that it's going to look at all of the children of the Target and it's going to add the new content after the last child each time now this polling will continue indefinitely so we have the page here but every two seconds we're sending that polling request to the back end and we're getting these responses which are being swapped into the dorm every two seconds now when you're pulling typically you're waiting for some sort of condition or you're getting some updates from the back end but sometimes these conditions will be fulfilled and you'll get the response and then any further polling will just be a waste of resources for example maybe we have achieved everything we want to do at this point but the polling will continue and that's extra load that's been sent to your server so what I'm going to do is go back to views.pi and at the top I'm going to import from the python standard Library the random module and we're going to go down to our polling view which is the success view this is the view that takes the requests from that polling element and we're going to terminate the polling here if we get a random number between 0 and 1 that's less than 0.35 so let me just write this code just now if random.random is less than 0.35 what we're going to do here is print this message of polling terminating and that's going to be printed to the terminal and then finally we can return our new object that we've imported at the top here it's the HTTP response stop polling so let's paste that in there and instantiate that and what this view is going to do is there's a 35 chance that it's going to find a number less than 0.35 and that's because random.random will return uniformly numbers between 0 and 1. so if we get back that number with 35 probability what's going to happen is we're going to stop the polling and we're going to see on a page that we no longer send those requests to the back end so let's test this out if we go back to the page and refresh this page we are going to see initially that we're getting the polling and we see that we're still getting the polling the second time around but we are no longer getting that polling now and that's because in our view the random module generated a number that was less than 0.35 and we can see the polling terminating message on the terminal and finally from that view we've returned the HTTP response stop polling and that tells the client that we no longer need to pull the back end for that particular element and stopping the polling whenever we don't need to actually do it is a very useful technique for reducing the load on your server and that can help performance can help with costs and so on so what we're going to do now is go back to the Django htmx documentation and we're going to go down to these response modifying functions and we're going to start with this function here called push URL and that sets the HX push URL header of the response and then returns that response that header will make htmx push the given URL into the browser location history now for the moment let's go back to our template I'm going to remove this div that performs the polling and then we're going to go back to viewers.pi if we go to the index.html view here let's remove this HTTP response location redirection and for now I'm going to go back to the way this was before but we were just rendering the partial.html that contained our lorem ipsum text now if we go back to our web page here and refresh this page when we click the link you can see we get back some text here that's swapped into the Dom but we are not getting any change to the URL now this might be what you want you don't always need to change the url but sometimes when you perform an htmx request you want to add a different URL into the browser history and have that showing up on the URL bar now this can easily be done in the htmx attributes that we're adding to the Anchor tag so we could add the HX push URL attribute and set that equal to slash lorum if you go back to our page and refresh when we click the link you can see that's now added to the URL however sometimes we may need to do that from our jungle view so let's go back here and remove this attribute and if we go back to views.pi at the top here I'm going to remove the imports from the HTTP module and this time we're going to import the push URL function now what we can do in the index view here when we have an htmx request rather than directly returning the response we can create a variable called response and then call the render function which is going to return that object to us and then to actually add the HX push URL header to the response we can use this helper function that we've just imported so let's now return the push URL function we can pass the response as an argument to that and then the second argument that we can pass is the URL that we're actually wanting to push to the URL history so let's say slash lorem for that if we now go back to this page and refresh when we click the link again we're getting the URL added to the URL bar and if we go to the network tab here on the browser and again if we go back and refresh this page when we click the link you see we're getting back this response here if we look at the headers in the response you can see the HX push URL header and that's set to slash lorem and that tells htmx when it receives that response with that header that we want to push that value into the browser history so let's close developer tools now and we're going to go back to the documentation let's move down to the next function which is the re-swap function this sets the HX re-swap header on the response and you can use this to override the swap method that htmx will use so let's go back to vs code and again I'm going to remove this and we're going to go back to the way this was before so let's return the render method and we're going to render the partial.html now to demonstrate the re-swap function we're going to first of all import that at the top but we are going to change the structure of the HTML again so let's go to index.html and we're going to change this to our UL tag so now rather than a paragraph We have a UL tag with the ID of htmx content and initially this is an empty unordered list now when we click this link above the HTML link here it's going to send a request and then it's going to load up this partial and the response containing the lorem Epsom text and that partial is going to be swapped into this UL tag because the HX Target is set to that ID now what I want to do in the partial.html is change the paragraph tag to An Li tag and that's because the returned partial will be swapped into an unordered list so it makes sense to actually make this an Li tag let's now save these files and go back to the page when we click the link you can see that we get the LI tag with the alarm ipsum text added to that UL tag and we can keep clicking this link and it's always going to add that content into the UL tag but it's going to replace all of the inner HTML because the default swap mechanism in htmx is inner HTML so no matter how many times we click this button the responses are always going to overwrite everything that's within the UL tag now we can use the re-swap function to actually change the swap mechanism so let's go back to viewers.pi and again I'm going to store the response and a variable here and what we're going to actually do is return the re-swap function the first argument to that is the response object and the second argument to that is the swap mechanism that we want to use and vs code's type painting here tells us that we can use any of these literal values and the one that we are going to use again is the before end swap method and that's going to change from replacing the entire inner HTML to taking the content that we're returning and swapping that after the last child of the target so let's go back to our page and we're going to refresh this page and now when we click the link we get the Lorna mapsum but when we click it again the content that we're getting back is now swapped after the last child and that's because we are changing the swap mechanism via this re-swap function let's now move on and go back to htmx's documentation we're going to look at the retarget function now and this is going to set the HX retarget header of the response and by setting this header we're going to override the element that htmx is then going to swap the content into so we're overriding the target of the response now for a real example I'm going to use this retarget function in an upcoming course on building a small personal finance app using Django and htmx but for now let's just show a dummy example like all of the others in this video what I'm going to do is go back to vs code and I'm actually going to go to forms.pi and I'm going to create a very simple form here called filmform which has a name field which is a forms.car field now we're going to display a use case here where a user will submit a form using htmx if the submission is successful we're going to replace the content of that page with a success message however if the response fails we want to redisplay the form with the errors we need to do that using htmx as well now sometimes you might need to change the target of the response because you have these different conditions on the back end and perhaps you're returning content that needs to be swapped into different areas of the document depending on whether an action was for example successful or whether it failed and the retarget function is useful for this so let's see an example now I'm going to to import this form into the views.pi at the top here and within the index view I'm going to add a context variable within the else block and we can then add that context to the render function and that's going to add the form into the context now what I'm going to do is go to templates here and I'm going to add a new template called form.html and I'm going to paste a form element in here and this is a form of the ID of submit form and when it's submitted htmx is going to send a get request again to the index View and the target for the response content is going to be the entire body of the document now it's not a best practice to replace the entire body of a document you might as well do a redirect if you're doing that but in this case it's going to be done for example purposes because we don't have a big page full of data here what I now want to do is include this form.html in the parent template so just under the UL tag I'm going to define a div with the ID of page content and that's going to include that form.html template one other thing to note is that the form is going to be submitted and it's going to send a get request this is is just for Simplicity so we don't need to deal with the csrf token and what we're now going to do is go back to views.pi and within the if statement here when it's an htmx request we know the form has been submitted so I'm going to replace the content in this with some other code here we're going to instantiate the film form with the get data and store that in a variable called form we are then going to check if the form is valid and then finally we will return an HTTP response with that simple message successfully submitted form so that's a very simple setup let's see how it looks on the page if we refresh this page we can see we get the form just below our link here and let's just add a random name here and when we click submit we can see the success message and that notifies us that the form submission has been successful now what happens if the form submission fails let's go back to our forms.pi and we're going to add a validation function to this class and it's going to be called clean underscore name and this is a Django convention when you have a field in a form you can define a clean underscore field name function and that can then perform validation Logic for that field in this case we're checking if the value that's been submitted starts with the letter a and if it does start with a what's going to happen is we're going to raise a forms.validation error with that validation message so let's go back to our page and we're going to refresh this page and we're going to actually submit our value that begins with the letter A here this is not allowed Remember by our new validation function so let's submit this and you can see that currently nothing is happening now if we go back to views.pi and we look at this function when we submit the form the if statement evaluates to true and then we are checking if the form is valid if it is valid we are returning this HTTP response but if it's not valid we're actually not returning any HTTP response at all so what we can do if the form is not valid is to set a context dictionary here with a key of fun and the value for that is going to be the form that we are actually checking here that now contains our error and if the form is not valid what we want to do is return the form.html partial containing our form and that context with the form containing its errors let's now see if this works and go back to our page when we submit our value beginning with e we are getting back the form with the error now the problem here is you can see we've lost all of the other content that was in the form page when we return the form.html partial here as a part of the error response if we go to the form.html you can see the target is set to the body at the moment and that's maybe fine for the success path when we just want to display a new page with a success message but in the case of an error we want to change the target of the response and swap it into a different area of the Dom let's use the retarget function to do this within a reviews.pi file at the top from Django htmx.http will import the function and then just below here when the form is not valid and we hit these two lines of code when we render the template I'm just going to store that in a variable called response and then we're going to return the retarget function here we're going to pass into that the response and also we're going to pass the new Target where the response content is going to be swapped into now what is our new Target going to be so we're returning the form.html and we want to replace the current form with our new form that contains the error if we go back to the index.html template you can see we are including this form partial within a div with the ID of page content so if we want to replace our existing form we can take this ID here and we can use that as the ID within the retarget function so let's paste that ID in and let's now go back to our page and refresh this page when we submit a value beginning with e this time we simply get back the form and it's swapped into that div tag and it replaces the existing form and the retarget function is changing that HX Target from the body that we Define within the form it's changing it from that to this page content and it's doing it via this retarget function so the takeaway I think from this is that when you have multiple conditions that maybe require different responses that have to be swapped into different area years of the document the retarget function can be a very useful Helper and it allows us to change up that Target to a different element within the document so that's the retarget function we have one more to look at here so let's go back to the documentation and it's a function called trigger client event now this is a very useful helper function for triggering client-side events within an htmx response from Django you can use this to trigger a custom event in the document that then perhaps sends a second request to Django and gets more information to swap into the Dom and to demonstrate this we're going to continue with our form example so let's imagine that on success when we successfully submit the form we need to perform some secondary action we can do that by triggering a client-side event using this trigger client event function and then we can perform that action on the element when that event is detected so let's go back to viewers.pi at the top here I'm going to bring in the import of the trigger client event function and if we go to our index view again when the form is valid we are going to successfully submit the phone at the moment we're returning an HTTP response let's store that in a variable called response as we've been doing for all of these functions and what we're now going to do is return the new function here called trigger client event we'll pass the response to that and as a second argument we can pass the name of the event that we want to trigger now because we're adding a film here with this very simple form let's call the name of our event film added so on success we're going to trigger an event called film added and remember when we submit the form using the form.html the HX Target is set to the body so it's the body element that we are going to swap the content into we need to listen on that body element for our custom event so let's go to thebes.html and remember earlier I said you shouldn't probably be doing this on the body tag but for this example let's just see how it works so what we're going to do is we're going to listen for the film added event on the body tag and we can use the HX on attribute to do that the first part of HX on is the name of the event that we're listening for in our case it's film added and then we can add a colon and when we get that event back from the server let's just perform a dummy action now so I'm going to paste a bit of code in here where we set the document.body.style dot background color equal to this color here so we're changing the background color of the document's body and we're doing that when this custom event of film added is triggered on the client let's see if this works by going back to our page and refreshing the page when we submit a form and the film's name begins with a we get back the error as we did before but when we change that and submit it to a valid name that is going to then submit the form we get back the content and you can see the document's body has a different background column there and this is done because on the server we are triggering a client event and we're specifying the name of that event as the second argument and then on the client we are listening in this case for that event and we are performing some sort of action when we receive it now more commonly on an event you can check out additional requests to the server and then perform subsequent actions when those requests come into the server and the trigger client event function allows you to easily do this from the back end trigger the client event and then on the client you can do anything you want when you receive that trigger so that's all for this video now these have obviously been canned examples but these tools provided by Django htmx they can be very useful in a real world application and that's because things in htmx it's not often as easy as simply rendering a partial whenever it's an htmx request and returning that and swapping it into the same element in the Dom every time sometimes you have to render different partials sometimes you have to swap things into different parts of the document things are often quite dynamic in a real world application and Django htmx gives you some nice tools for dealing with this we're going to see some examples of some of this stuff in an upcoming series that I'm going to do on building a finance tracker with Django and hdmix but for now thanks a lot for watching if you've enjoyed the video please like And subscribe to the channel and we'll see you in the next video

Channel: BugBytes

Views: 3,308

Keywords:

Id: to1exRe7Z8E

Length: 37min 6sec (2226 seconds)

Published: Mon Jun 19 2023