HTMX 1.9 - hx-on Attribute for Responding to Events

this is going to be a short video where we dive into the new htmx 1.9 release and we have a new attribute in that release it's called HX on we're going to see some examples of how to use that in this video now this page here has the release notes for htmx 1.9.0 and in this release we have support for review transitions on Google Chrome and also support for what's called naked HX trigger attributes but we're going to look at the third one here and that's support for generalized inline event handling with the new HX on attribute so let's go to the page for this new HX on attribute we have this page here I'll link this below the video and this allows you to embed scripts inline to respond to events that happen on the page and this is similar to the own event properties you can find in Native HTML but it improves on that by enabling the handling of any event for enhanced locality of behavior and that's a core philosophy to the htmx community locality of behavior and you can see how to use this attribute in the code examples here we have a div tag with the HX on attribute and the string that we get for that attribute has an event name and then the action that's performed for that event and in this case we're simply alerting out a message to the browser so we're going to see how to do this in the context of a Django application but this can be applied to any project that uses front-end codes and uses HDMX so let's get started we're going to go to vs code and I've got our Django project set up here and we're loading htmx from a CDN here within the head tag now within this setup we have this base template that contains all the boilerplate HTML and we have an index.html template that extends the base template and within there we have a Content block that just at the moment displays the message hello we can go to that page on our browser and you can see what that looks like here what we're going to do is just show some features of this new HX on attribute so let's get rid of this text and to start with we're going to define a div tag with the ID of root I'm going to give it some Style with font size of 40 pixels and within that div actually will bring back the Hello message and we can close that tag off and let's go back to the page and we can see how that looks now we have the div tag at the top left and the font size has been increased to 40 pixels so what we're going to do now is add our HX on attribute to see how that works so let's go to the tag and we can add HX on and we set that equal to a string now here we Define an event that we want to respond to with this attribute and the event we're going to use is the click event and when that console let's just alert something to the browser and we're just going to alert the message hello from App here and we're going to go back to the page and let's see if this works if we refresh this page and we click the hello text here you can see we get the alert message appearing on the browser so that's how it works you simply have an event and you're responding to that event with some code and the code is defined within the HX on attribute and it's defined after the event name and after the colon and we can respond to any event in the Dom for example we could respond to the mouse over event and we can change the alert action that occurs when that event happens to a window.confirm with the question do you like htmx so let's see how that works now if we just Mouse over this we see that the alert appears or rather the confirm message appears and we have a question here do you like htmx and we can select OK or cancel nothing's going to happen either way or just showing the different options that you can apply here so let's now move on to something a bit more practical what we're going to do is firstly we're going to go back to base.html and underneath htmx we're going to add bootstrap CSS as an import here so I'm going to go to the documentation and I'll pop the link for this in the description we're going to copy the CSS code and we're going to paste that into the head tag here and that'll bring bootstraps Styles into our application now let's get to some htmx content we're going to go back to the index.html and I'm going to remove these attributes here from the div and we're actually going to replace this hello with some other code here I'm going to define a button and that's going to send a get request to our Django backend so we specify the HX get attribute and then we can use Django's URL template tag and we have URL with the name of index in this application you can see that within the URL patterns here it has the name index so we're going to reference that as the URL that we're going to send the get request to and I'm going to just close that button just now and we're going to say fetch with htmx that's the text within the button itself and then we can close that tag below that we're going to Define another div and this is going to have an ID of user table and we can close that off just below now the idea is we want to show a table of different users in our application we're just going to at the moment show a message saying no users yet we can put a sad face there as well now actually before we go on here I've set this to index but I actually want to create a new URL pattern here so I'm going to copy that path and we're going to Define A New Path here and it's going to have a string of content and it's going to call a new view that we're going to Define in a second called htmx underscore content now the naming conventions here are not great but we're just doing this for demonstrative purposes and we can give this URL a name of htmx Dash content and we're going to copy that save the URL patterns and then go back to our template and we're going to use that URL here within the button when we send the get request to Django so now we're going to send a get request to this particular view here so let's copy the name of that view and we'll go back to views.pi and Define a Django function based view here that takes the request as a parameter and within this view we're simply going to return the render function and we pass the request to that and we're also going to create a template here called partials slash user table.html and that doesn't exist at the moment so we're going to save the views.pi file and within the templates directory we can create that partials folder and then we can copy the name of this template here and create that within that folder and in here we're going to define the HTML that we want to return from that jungle View and htmx is then going to swap that into the Dom so what do we want to put in this template I'm just going to get some dummy code from bootstrap CSS here and it's going to be this table here and I'll leave a link to this below the video we're going to copy the code for stable and this table defines a set of users and it's got a first name a last name and also a handle so that's the columns for this table we're just going to paste this in here and our Django view which is this view here is going to return this table of HTML content to the front end and then htmx is going to swap that somehow into the Dom so that's the next step what we want to do is swap that returned HTML into this div tag here with the ID of user table so what we're going to do is Define an HX Target on that button and we're going to set that equal to the user table ID and that tells htmx where to apply The Returned HTML where to swap it into the Dom so this is a simple setup for what we're doing we have a button and when we click that button it's going to fetch the content from the end point in Django and it's going to swap that table into the Dom underneath that button so let's see if this works if we go back to our page here when we refresh this page we have the button when we click that button the message below which says no users is replaced with the table of content from bootstrap now let's say that when we click this button we want to alert a message when the response is received later on we're going to see how to actually do something useful and print out how many users are in this table just below and using the HX on attribute to do that but first of all let's go back to the code we're just going to alert something to the browser whenever the response is received we can do that on this button element using some htmx native events so let's do a new line on this button and again we're going to use the HX on attribute and we're going to specify a string here and the event that we're listening for here is going to be htmx after request and if you want to know about this event and all the other events that are provided by htmx there's a page in the documentation I'll link this below the video and the htmx after request event that's triggered after an Ajax request has finished and that's applied either in the case of successful request or also in the case of a failure so in our code here we're listening for the after request event and when we get that we want to alert that our response has been received to the Dom so let's see see if that works now and we're going to go back to our page refresh the page when we click the button you see that we get the alert message before the content is swapped into the Dom when we hit OK here you see that the content appears in the Dom so now we have this alert coming up in between the response coming in and also the content being swapped into the Dom and we can use another event in htmx if we want to do something after the content is actually present in the Dom so we're going to go back to our template here and I'm going to copy this hx1 attribute and we're going to bring it down to the Target which is the div with the ID of user table and we're going to change this event here from the after request event to the after settle event and the after settle event that is different from after request this is firing after the content from the response has been swapped into the dorm and that content is then present in the dome that's when we can listen for this event and we can alert that the content is in the Dom so I'm just going to put a new message in here content is in the Dom if we save this template we can go back to our page here when we click like the button we get the response received message after the request we can hit OK the content is then swapped into the Dom and we get the content is in the Dom message from the after settle event so that's two different events that you can hook into and you can do that using native JavaScript but also now you can also use the HX on attribute now I'm going to show two more things in this video firstly we can call our function that's defined elsewhere in our JavaScript code we're going to see that next and finally after that we're going to see how we can use a custom event that we're triggering from our Django back end so I'm going to do is I'm going to remove the HX on attribute from the button that sends the actual get request and I'm also going to change what's executed on the after settle event and I'm actually going to call a custom function that's called output message and we'll call that function and we can end the tag here so let's go over this we have an hx1 attribute and on the after settle event we're going to call a custom function called output message now what we're going to write is a function that will look at the Dom after the set 11 and it's going to calculate how many users in this table and display a message below the table using that custom function so let's get started writing that function if we go underneath the dev here we can write a script tag and I'm going to Define that custom function called output message so let's write that function now it's called output message and what we're going to do is calculate the number of rows in that table so let's start by calculating the number of table rows we'll create a variable called TR and it's going to be equal to document dot query selector all and we pass a CSS selector expression to this so we're going to look at the table body here and we're going to get all the table rows that are children of that table body the second thing I'm going to do is get a reference to this root element and we're going to append a child to that root element after we calculate the number of rows in the table so let's call that root and in this case we're going to use the document.getelement by ID function and the ID we pass to that is the ID of root so we have here all the table rows in the table we're going to calculate the length of that and create a message and add it to a paragraph tag in the Dom so let's create a paragraph tag by using a JavaScript expression here we create a variable called p and we're going to use the document.createelement function here and the element that we're actually creating is a paragraph tag so we can just put p in there underneath that we're going to create a text node that's going to contain the actual text for that paragraph so we'll call the variable text and that's going to be equal to document dot create text node and this is another function and we pass a string to that I'm going to use a JavaScript template string here and the text that we want to put in the paragraph tag firstly we're going to reference are TRS and we're going to use the length property on that to get the number of table rows in the data and after we get the number we can just say something like users we are discovered so for example if there are three rows in the table it's going to say three users weren't discovered and now we just need to add our new elements to the Dom so to the paragraph tag we can use the append child function and we can append our text node containing that message and then the final thing to do in this function is we're going to actually add the paragraph tag to our existing document which we have up here we're going to to reference a root node here I'm going to append a child to that and that child is the paragraph tag itself so underneath this content we're going to have a new child appearing here and that's going to be this new paragraph that contains the number of users in the table so let's save this file and what we have here just to go over is an output message function and we're calling that from our HX on attribute on the after settle event so let's save everything and go back to the page and refresh this page when we hit the button we fetch the content and nothing is happening here so I'm not sure what's going on let's go to the console here and we have a message here and it's a reference error and I've misspelled documents somewhere in this code so let's go back to the code and I think it's on line 22 here we've misspelled document so I'm going to change that to what it should be sorry about that and we'll go back to the page when we hit the button we get the table and you can see underneath that we have our message saying three users were discovered and we can see that without the developer tools as well when we hit the button it's going to the back end Django's returning this table and htmx is swapping that into the dawn after the swap the after settle event is fired and then that function is called the outputs the message telling us how many users are in the page and the function is called through this new attribute the HX on attribute so this is very useful it allows you to respond to events that occur and it allows you to do so in line and that also preserves that philosophy of locality of behavior so let's now see how we can use custom events in htmx and use them within the HX on attribute we're going to go back to views.pi and I'm going to change this statement and create a response variable that is set to the return statement of the render function and I'm going to add a header to that response this is an HTTP header it's called HX trigger and that allows us to trigger an event on the client side so what I'm going to call the event in this case I'm just going to call it custom event you can call that anything you want once we've added that header to the response we can just return that response and this is going to return an HX trigger header as part of the response content and the header value is going to be custom event once we've done that we can save the views dot Pi fail and go back to our index.html template and I'm actually going to remove the code here in the user table and we're going to add the HX on attribute to this button above so let's add that attribute and we're going to listen for a custom event and that has a name of custom event so this is the event that's been returned from our Django backend we want to perform an action when we receive that event so let's say that when we get back this custom event we want to make the background color of the page green that's what we want to do when we receive this event so what we're going to do is we're going to get a reference to the document.body element and to that we can change the style and in our case we access the style attribute and we're going to access the background and set that equal to Green here so we get back the custom event and we're changing the style of the entire body tag and making the background color green so let's save this file and we're going to go back to the page and we can see if this works when we hit the button you can see we still get back the table but now we have this green background color I'm not sure that this color is the best but I'll leave that up to you if you want to put that in your applications let's go back to the template we're going to show something else now and we're just going to hammer home the point here that you can put any JavaScript code you want Within These HX on attributes to respond to events what I'm going to do here is paste in a new selected expression we're going to get the button that we click on the page it's this one here to fetch the content and what we're going to do to that button is we're going to change its style and put the font size of the text within the button to 40 pixels so that's going to change the appearance of this button when we click it and we fetch the response so let's refresh the page when we click the button you can see the text within that button on the response on our custom event is increased to 40 pixels here now again this is maybe a bit questionable from the perspective of user experience you might not want to be increasing a button this much in your actual applications but we're just demonstrating how to do this using the HX on attribute let's finish with an example of how to transform this element so we're going to remove this style of the font size and we're going to reference the transform style and we're going to set that equal to rotate and we're going to rotate that 45 degrees we need to also put this in a string here so that we can read that properly and actually we also need to make sure this is an equal sign this isn't a CSS file it's a JavaScript expression so we're setting the transform attribute equal to the rotation of 45 degrees let's now save this file and go back to the page we can refresh the page and when we click the button you can see that it's rotated 45 degrees and this is the final thing we're going to do in the page we're just going to leave it like that and hopefully you won't be deploying this kind of thing to production but that's all for this video 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: 13,088

Keywords:

Id: jFOBt20mZGI

Length: 16min 34sec (994 seconds)

Published: Wed Apr 19 2023