jQuery Ajax Tutorial #4 - "Edit" modes & Better Mustache.js Templating (jQuery tutorial #9)

Key Takeaways

all right this is our last video of building a basic jQuery ajax app we can now get orders we can add orders we can delete orders all that's left is to edit orders and for that we are going to use a put request uh kind of if you're you've probably heard the term restful apis and that's kind of a standard way of putting together an API where you use get request to access things your back end is looking for post request to add new items uh and if an item has an ID and you want to edit it then you use a put request to it's basically the same as a post but you add the ID on the URL and then you do a put request and you will update that resource uh and then delete which we've already done which you can do by ID we're going to be doing the put request it's the most involved and so we're going to take our templating to a whole new level uh show you a better way of templating other than scratching out lines in JavaScript that's going to be the first thing we want to do this is pretty much as far as I will ever go with plunking out you know uh string lines concatenated together in JavaScript it's kind of messy it's a whole lot of quotes it's just stuff we don't want to do Beyond this this is as far as I'm going to go any more than this we got to go one of two routes we either got to put a template tag in our HTML uh which is a quick easy way and that's what we're going to do for this or you can say you have a lot of templates you can create an HTML file for each template and then you can use something like grunt to automatically turn those into JavaScript strings for you that's way more involved than we need for this so we're not going to do that in this uh but let's go ahead and take this we're going to copy it out and what you can do is you can add a template tag and so we're just going to paste this in here I'm going to use my Apple D multiple cursors and Sublime to get rid of all my quotes and same thing to get rid of all my pluses there we go now if I give this an ID order template and then I can in instead of stringing all this out right here I can go order template equals and I can grab it with jQuery HTML did I do order Dash template yes I did okay so this should work exactly as I have it before let's save and refresh excellent so this is working perfectly and it's much cleaner you get syntax highlighting here uh you know you see all the pretty colors that you should see when you're coding HTML and it just works uh one one thing to mention if you're using ie eight or older uh it may just be a safer way to just go script uh this is kind of the old way we used to do it you do a script tag and you give it a type of text SLT template and what that's going to do is it's going to tell the browser type text template the browser doesn't know what that is it knows it's not JavaScript so it's going to ignore this block of code uh and you you're safe to put anything you want inside of it uh you're not going to blow up your JavaScript on the page because it doesn't think it's JavaScript so that's kind of the old way to do it uh I'll just stick to the template tag uh for now since I'm only supporting HTML 5 browsers with my application and yay now we can move forward so we're going to do is we want an edit mode for this Li I'm going to go clean up my HTML a little bit uh we want an edit mode so what we're going to do is we're going to add a class of edits to this Li when we're editing it and then we want some stuff to be hidden and we want other stuff to be shown when that edit tag is there so I'm going to go ahead and bump this down I'm going to make it a span and this span will get hidden when we're in edit mode and I'm going to make an input and the input will get shown when we're in edit mode and the way I'm going to do that is with a class class edit so the class edit and I'm also going to get a class of drink uh name so I know how to access the name there and this class will get no edits so whenever edit exists on the LI anything with no edit will get hidden anything with edit will get shown yeah very simple sounds easy enough let's do the same thing here for drink and this just becomes drink there we go so that's covered and then we need some other buttons here we got the remove button we'll leave you there we need an edit button and this one will have let's see class equals edit order and I'm also going to add a no edit to this because I don't want to show this one we're currently editing um and then let's make a cancel button this will have edit so it'll get shown only when we're editing and we'll call this one cancel edit there's a lot to go that goes into editing it's a lot simpler to just create and delete um and I think that's it edit and cancel awesome uh we also need a save button now won't we so let's go save um this will be called save edit maybe and this one will have an edit class so we show this only on edit so if I hit save here we should see everything yep so now everything is plunked out let's add some CSS rules here to just hide what we need so when we're on edit I'll actually do this so any edit within the LI gets to display none there we go now anything that is only going to show on edit is gone and so then you li edit edit so when the LI is in edit mode anything with edit gets a display initial which is what it would have shown had we not added a display none and then no edit get a display none there we go that should work so now if I refresh I see an edit button and if I were to inspect this element here and add a class there we go now we see save cancel and they are inputs awesome now let's just wire this in with JavaScript so moving on uh we want to add down here another delegate because if you remember delegate is going to apply to anything that hasn't been created yet as well as things that are currently existing so I'm going to delegate um what was the name of I think it was called edit order yes edit order right there so an edit order gets clicked we are going to let's see let's cach this Li just like we did up here this I can actually probably copy and paste that for me there we go so now we're grabbing the closest Li and we are going to copy the name of the value into the value of the input for editing purposes so we are going to go Li find I want to find my input class name the input with the name class that's going to be this guy and I want to set the value to be the content of this guy so oh I'm going to add a name class here and I'm going to add a drink class here so so I'm going to basically set the value of span class name to be the value of input class name if that makes sense so let's go input class name Val which means I'm setting the value or getting the value and that will go l i find span class name HTML so that's we are setting the input to the same value as the span let's do the same thing with drink so now input class drink I love the sublime multiple cursors right there Apple D it's just H it's great okay so setting that and then we're just going to add the edit class so once again caching the the LI right here is a great move because I can do several operations and I don't have to search the Dom each time so let's see if that works hit edit and awesome we populate our two values and we turn into edit mode which means our save and cancel are there let's go and add our cancel item I'm going to actually copy and paste because this is probably a lot more similar than anything else cancel edit and then all cancel edit is going to do is remove class edit so I'm just going to grab that Li again remove the class of edit let's see if that works edit cancel edit cancel nice so that works um um add my semicolons there and then the last thing we need to do is the save operation so here we go same thing orders what did I call that save edit is the name of my save button so when save edit is clicked I'm going to have to grab those two values and put together my put request let's just do a very similar thing to what we did here Order equals name and in this in this case I'm actually going to grab the LI kind of same thing I've been doing and then going to go Li find input Val so there we go I'm going to grab the value of whatever that input is and order will be the same or drink will be the same way drink will be grab input drink uh have the value for that so there we go I've got my order put together let's post this thing to the back end I'm going to do some copy and paste to make it a little easier this is going to be a put request and instead of posting to API orders we're doing a put to API orders and we're also going to add the ID here so this is going to be let me make this easy I'm going to add the ID here there we go love m templating makes it easy to throw stuff in there so now I can just go Li H data ID so there we go we've grabbed the ID off of what that entry is we're going to put it to orders ID we're going to pass the order object and on success we are basically going to populate our values let's see what's going to happen so when we hit save we change this William I hit save I can't just go back to here cuz this span now needs to be updated I'll show you over here in the HTML we've put a new value in here when the save comes through as successful we need to take that value throw it in here and then take edit off of our edit mode so that's easy to do we're just going to go l i find span if I can type span name HTML is order. name there we go I'll do the same thing for drink and then I'm going to remove the class of edit which I think I have right there and so get that edit class removed and then error let's do error updating order there we go let's see if our API Works refresh so I can go will I am save not right click and there we go it's saved let's look at our Network to make sure that happened we did a put request to API orders1 got a 200 okay on that and if I refresh it should say William instead of will awesome let's change it back to will change my order to a frap I keep right clicking for some reason there you go we got it so I know I kind of sped through that may need to rewatch it again that's kind of how you're going to take your templating to a higher level that's how you're going to add a put request um and that's an easy way to toggle any kind of visual thing into an order mode is just add hidden you know hidden input elements and then toggle them on and off so hope you had a great time watching this and catch you around