HTMX - hx-select and hx-select-oob Attributes in HTMX

one htmx attribute that we've not covered so far on this channel is the HX select attribute in this short video we're going to see what this attribute does and we're also going to see a similar attribute called HX select out of band so this is going to be a short video Let's dive in and we have the documentation for HX select open and as you can see it allows you to select the content you want swapped from a response now when you send a request with htmx it goes to the back end and the back end will typically return HTML and this HTML can have any number of elements and nested elements within that document but sometimes with this HX select attribute you can select a specific portion of the Rotunda HTML to be swapped in on the response we're going to work for a very short example in this video of doing that within a Django project so let's open vs code and here we have the urls.pi file which contains two patterns one will be for the index View and the other is for our users view so if we go to views.pi these are very simple Django views they just return templates in this case the index.html template and the users.html template and if you have a very quick look at what's in these templates let's start with the index.html we have a header tag and a paragraph tag with some lorum Epsom text and we also have a button below here and we're going to use this button soon to actually wire up an htmx request to the back end and then we're going to use HX select when we get that response so we'll see that soon we also have our users.html and this contains a table that I've just copied from the bootstrap documentation and above the table we have a header one tag with the users and both of these templates they are extending a base.html template so let's have a very quick look at that and it contains two of these script tags or rather one script tag and a link tag the script tag is loading up htmx from a CDN and the link is the bootstrap 5 CSS Styles and you can see also within the body we have an include statement here in Django and includes template tag and we're including a navbar.html that just contains two links to the those pages so that's the setup let's get started and what we're going to do is go back to index.html and we're going to wire up an htmx request on this button but before we do that I'm going to run the server and what we're going to do is have a look at the page as it is at the moment so we have the page here you can see the header and the load them up some text and below that we have the button that we're going to use with htmx so this is the home page we can also click at the top here to the users page and you can see that very simple bootstrap table that is rendered on this page now if we go back to the home page what I want to do in this homepage when we click this button here I want to send a request and let's say we want to fetch all of the users that we have in this table and return that to this page and replace the lorem ipsum text so what we're going to do is go back to vs code and we want to return this users.html template that contains the table and we want to do that when we click this button so let's add some htmx attributes to the button we're going to add an HX get request and we're going to send that to our URL so let's use Django's URL template tag and we're going to send it to the users URL and if we go to urls.pi you can see it's this path here that loads up the view called users and that view is simply going to return this template to htmx and then it's going to swap that into the Dom so in order to swap it into the Dom we need to set a Target on this button here we can do that with another attribute called HX Target and we're going to set it equal to the ID of this lorem ipsum text so let's copy that and we can paste that selector in here and I'm going to move the text to a new line as well so that's all of our htmx attributes at the moment we have an HX get request to the user's endpoint and The Returned HTML is going to be swapped in and replace this target here which is the lorem ipsum text let's save this go back to the browser and we're going to test out this button so if we click fetch user so you can see we get back that HTML response and it's swapped in and it replaces the lorem ipsum text but we have a problem of course and that's that we also have a duplication of the nav bar at the top we don't want that we want to just render the T table that we have here so how can we solve this when we're using htmx and Django now one thing we can do if we go to users.html is we could take the table containing all of our users and we could break that out into a partial template and then just include that template in this HTML file and then when we get a request an htmx request to the user's endpoint what we can do is return that partial instead and then that will swap that into the document so that's one method what you could also do is surround the table with a block so for example we could call this users table and then you could use a library such as Django render block on the back end to only render the content of this block and there's also another newer library that I'm going to do a video on soon called Django template partials which is designed with this template fragment use case in mind so those are two potential Solutions but if you don't want to use these libraries these external libraries and you don't want to break the content out into a partial template what you can do is actually select a portion of the HTML response when you're swapping the hdmax response into the document so we have a table here and it has an ID of user table so let's copy that ID and we're going to go back to index.html and I'm going to break this into a new line what we're going to add to the button is another attribute that we've not seen before and that's the HX select attribute and we set that to a selector so what we're going to set it to is the user table and that means that when htmx sends a request to the user's endpoint and it returns this HTML content rather than swapping every single piece of content into the document at the Target it's actually going to select this table here by using the HX select attribute and setting the selector of that attribute equal to this user table ID as you can see here in the index.html HX select equals the hash user table so we're selecting that portion of the response and we want to only swap in that particular element and its children into the document so let's now go back to the browser here and we're going to test out and see if this works when we click the fetch users button you can see now we are actually only getting back the table we're not getting back the entire document that extends That Base document so we no longer have that duplication of the navbar and we also no longer have that header appearing this one here that says users and that's because we're only selecting the table and its children when we actually get back this response so just in summary instead of swapping in everything to the Target we can actually select specific parts of the returned HTML and only swap those in so that's HX select what about HX select out of band let's say that when we click this button to send the request when we get back the response we also want to replace the button with another button that has a different color for example a green button and that button is also disabled and we may also want to change the text within the button instead of saying fetch users after we've went ahead and done that we want to change the text to something else what I'm going to do to start with is add an ID to this button so let's call it fetch button and the reason that we're giving it an ID here is because we want to perform an out of bound swap up when we return the content from the users.html template so remember we're selecting only this table but below the table I'm going to add a duplication of that button so let's now add the button so we can do that with our button element and we're going to give it the same ID this is very important as what we gave in the parent template and that's the fetch button ID and then we can give it some classes so I'm going to give it some bootstrap classes the button class and also button success which is going to return a color that is green instead of the blue primary color and we also want this button to be disabled because we've already fetched the users from the back end so we don't need to do that again so we can disable the button and finally within the button itself we are going to add some different text and we're going to say users fetched and then we can close the element below here so just to summarize what we've done we've added a button to the response the htmx response and that button has the same ID as the button in the parent template and that's because we're going to perform an out-of-band Swap and we're going to select this particular portion of the response the button with this ID in order to do that out of band swap so let's go back to index.html before we do this let's quickly go to the documentation on HX select out of band it allows you to select content from a response to be swapped in Via an out of band Swap and the value of this attribute is a comma separated list of elements to be swapped out of band and the attribute is almost always paired with HX select as we're about to do now so let's go back to the index.html template and what we're going to add here below the HX select is the HX select out of band attribute and we want to replace this button with the button that's coming back from the response so we're going to select that particular ID now it's called Fetch button and that's then going to replace the button that we have already in the document with the new button that we're getting back from users.html which is this one here let's go back to the browser and we're going to test out if this works so we're going to refresh the page and when we fetch the users you can see we get back this button so there's two selects going on from the response first of all the lorem Epsom text at the top we are replacing that with a particular portion of the response by selecting this table that's coming back by ID and in addition to that what we're doing now with the button is we're replacing the original button with the out of band swap by using the button that's coming back from the back end with the same ID so we're able to perform two swaps here and we're doing that not with the entire content of the response but by selecting a specific portion of the response at each step now there is one problem with this code at the moment you can see that we have this new button when we successfully send the hdmixt request and get the response but when we go to the Usos page and we don't use htmx to get there we're just clicking the nav bar you can see we also have that button by default when we get to that page even though we haven't fetched any users using htmx so how can we solve this we don't want to show the button when we land on the users page we only want to see this changed button when we click fetch users and we get the response that turns out it's very easy to solve this if we are using Django htmx which I probably covered recently in a video if we go to settings.pi and we scroll down you can see I've got Django htmx in the installed apps list and if we go below we have a middleware here called the htmx middleware now I'll leave a link to the Django htmx documentation just below this video what we can do is go back to users.html and when we first land on this page if it's not an htmx request it's just a normal request we don't want to show this button we only want to return this button when we have an htmx request and we want to return the response to that particular color which is the button in index.html so in order to solve this we can go back to users.html and we're going to surround this button in our template if statement and we're going to check if it's an htmx request by looking at the request.htmx property and this property is added as I've mentioned in that Django htmx video by this middleware that you add to the middleware list so if you've got that you will have an htmx Boolean property which will be true if it's an htmx request and that's what we need here if it's an htmx request only we want to return this button so we can end the if statement and we don't need to do anything else here let's now go back to the browser and we're going to refresh this page on the index page when we click the button we still get the correct response because it is an htmx request so the if statement is evaluating true and returning that button and importantly when we go to the users page we don't get the button on this page because it's not shown if it's a normal request so that's one way to deal with that and that is all for this short video on the HX select and HX select out of band attributes and if you're interested in any more short videos on these htmx attributes just let me know in the comments if you've enjoyed the video give it a thumbs up and subscribe to the channel and we'll see you in the next video

Channel: BugBytes

Views: 7,708

Keywords:

Id: JhskwvJuXF4

Length: 11min 49sec (709 seconds)

Published: Fri Jul 07 2023