Ajax: Delete - Rails 11 of 11

in this lecture we want to take a look at understanding how rails handles Ajax so for those who don't know what Ajax is it's like on the surface it's really about interacting with your web page and your website without a full page reload and so what I mean by a full page reload well if you notice if I'm if I click any link in the page and even though this page is loading fast it actually is doing a full page reload and I can go back and forward in history which you can also see in here too we're navigating through the app I can click on any of these right and so those are actually sending requests I could also look at you know anytime we interact with the page you know a new request it's get sent and that's what these server logs are showing was the full response in the page so their requests by clicking the response is what the server will give you back so that's pretty standard pre normal but sometimes doing full page refreshes reloads can take away from the user experience whereas using Ajax which actually will you can actually make a request to the server and update just parts of your page without doing a full page reload so sometimes that's cool and beneficial so I'm going to show you an example of that today and the example I'm going to use today is actually on a destroy so like right now if I click on destroy and click ok what that will do is go to the server delete that file and then reload this devices page excluding the actually reloads the index page as well to reload all the devices and again it happens pretty quick but it does that full response cycle so what I want to do is actually just um when I click destroy I wanted to just go ahead delete the record but then only if I can select this very well only delete this one element out of the Dom is really what I want to do so I'm going to show you how to do that so the first thing we need to do is actually rails makes it really easy to turn any link into an ajax link and i'll show you how to do that so i go to the code yeah here it is destroy if i simply just do a remote through that we'll set up a data attribute on that link that rails looks for and says if i see this i'm gonna turn this into an ajax link alright so let me hit refresh yeah no I'll just show you what that looks like right here you know right here data row equals true rails will look for that and it kind of observes that in the Dom and says if anytime that gets clicked we're gonna do an ajax call and it's going to make an AJAX call to the same href here but it's just gonna do it instead of doing a full get on that it's just gonna do an ajax call on that so that's pretty cool rails makes it really easy to do that and so well where is that going well if you if we head over to the devices controller right we have our index get device you know this one is actually going to delete in fact if I look at that again notice we have our method which is delete and that's how rails knows to go not only to go to devices slash device ID but using the method delete it knows to go to the destroyed action so that's where you see a delete here to this URL we'll come into this action alright so then it looks up a device to destroy and then on a full request response cycle this HTML is called now we've never used this this JSON format here so I'm going to ignore that for now but that's if you ever set up like an API where you have a front-end maybe I'll make a note of that here you know if you have a front and JavaScript framework ie angular react let's shut off they would most likely use JSON calls to your controllers so we're we're not doing any of that this quarter obviously and that would be a cool topic for another class though so definitely something to look into or at least for some research but rails makes it really easy to create back-end api's to the HTML is for your full request and then response from the server so full page request response from the server and that reloads the page and that's what we've been using all along the whole quarter just fine but whenever we want to do Ajax calls to this to this controller action we need to use format j/s and you know yeah I wish they would have did something like format Ajax or something but yes it really is Ajax is just part of JavaScript anyway so it just it makes sense you've got to make that translation so well format dot J yes and so when that happens we need to do some other things what rails expects now is it expects you to create another file and this is along all your other views notice there's these forms and edit index show etc here we actually just need to create another file that matches the same name as the action so destroy and then rails has a convention to name this file dot JSP RB and so the those extensions are actually important dot J s is obviously responding to this format j s so there's the the match there but an ER b is let me get back to this file ER b also means you can embed ruby into this javascript so it sounds kind of weird at first but it's actually really handy and rails makes it super easy to embed your Ruby code into JavaScript I'll show you what that looks like so what we want to do in here is I'm just going to make some quick notes actually we should just see if this even works so I'll do it I'm just gonna write JavaScript called from destroyed just that we are B so let's just see if that even works refresh go to console and click destroy and boom there it was called from destroyed it that was a from that destroyed jst air be fil so that's cool and also you can see xhr is the short notation for Ajax so we also made that Ajax call successfully so we got a couple good positive notes here that this is working so again what was my goal here again well what I want to do is instead of doing the full page response here when I click destroy I just want to remove this one TR in the head of the dumb and not do a full page refresh alright so let's get back to thinking about that well I need to somehow identify each of these rows uniquely then right now there's nothing uniquely identifying each row out of the dom so what I'm gonna do is go back into the code and update the Dom this element give each an ID of I'm gonna use the device ID which makes a lot of sense so I'm gonna give each row so that I cannot identify and do something with it after the Ajax call is made so let's look and see what that did refresh and then all the Dom elements let's see all the rows notice all the rows now have device and then the ID so we can uniquely identify each row this is this will be important in a second so finally what I want to do now is in here instead of just doing a console about log I actually just want to write some JavaScript like I want to find the element remember we use the device in the 90 so here's the part where I can embed some brooby right into my JavaScript which is pretty cool you might be wondering well where did this device come from well what's again we got to make the connection that we're coming from this controller right here when we actually did do a lookup on device and we have this instance variable and rails will make that instance variable in your in your JavaScript template basically so which is super cool makes it super convenient to access that value so you know what to do with it so that's how we can get that over here for free so we're gonna get that element and again let's just go full circle with this let's just make sure we're getting the right thing so I'm gonna console.log the element out and it should be the table row okay so let's destroy one of these boom we print out the table row yep that looks good so that's the one week we deleted awesome so I think that this is great so the last thing we want to do is just remove it from the Dom so we'll just we're just using straight up JavaScript here we'll remove it from the bottom I'm gonna save that refresh here I don't think I need to know okay so now I couldn't destroy this first one and this row so this first row Acer I ACR iPhone 5s Windows 10 Jacqueline and mark that should just disappear without doing the page refresh and it did so notice we made it makes it xhr request that first row disappeared and we did not do a page refresh so super cool let's see if we can analyze that request a little bit more so there's the response there's the request let's take a look at this real quick so we requested this URL using the delete method we got an okay status code which means everything went well and then we got a respond power I guess I don't know what else can we look at some headers we have JavaScript headers I guess nothing else much more exciting um this x8x requested with is HTML HTML HTTP request so just making I just wanted to show you some things to look for that we are making an ajax call versus of just a regular request so that's pretty pretty cool should I go back to network again go here did this one notice that was a wet regular response or a regular request and you know notice there's no xhr you know there's no xhr call down here whereas on this 217 1 you know there was an X requested with on this to h18 one which is my click to the Edit Page you know there's nothing Ajax about this at all in fact the accept header is at XHTML whereas on the Ajax call it's um except header is text JavaScript so I'm just I'm just getting you to notice and observe the different types of things the headers are sending and passing back and forth to the server so that the server knows if it's a regular request or not cool cool well that pretty much does it for that I hope this helped demonstrate a little e scratch the surface on understanding the difference between ajax.request and a regular full request response request that's it for now talk to you later

Channel: Karmen Blake

Views: 121

Keywords: ruby, rails

Id: jUdb5aqo-6I

Length: 15min 25sec (925 seconds)

Published: Fri Jan 11 2019