You should definitely be comfortable with jQuery's access to these features. Now jQuery also implements the concept of chaining methods, so that the result of one action will be accessible and passed along to the next sequence of events. Now learning to chain is essential to mastering jQuery. So let's take a look at how we can work with jQuery to perform a simple task. Here we have what we've been working on in the last few weeks and it's just a page that has jQuery and boot strap installed and we've got this load info button and it has a class of load info and I've modified this so it becomes an unordered list that has a class of info artist.
So we're going to target this element in the DOM. We're going to load some AJAX and we're going to insert it in this unordered list. It's going to be super simple. Now, do note that although I'm using boot strap boot strap normally ships with a lighter version of jQuery which is pretty much just the jQuery selectors. It doesn't include the AJAX. So for this week's video I'm including the entire jQuery library, the slightly larger one. It's about 32K, G zipped, so it's not that big anyway, but it does have a few more features, including all of the AJAX stuff that we're going to be doing.
So after this we can start targeting the DOM and as I mentioned we've got this button with a class of load info and using that same jQuery dollar sign variable we use something that is similar to query selector but a lot more flexible. We can just type in the dollar sign and then in parentheses put in what we want it to target here. So you could say load info and this is the button with the class of load info. Now the way you do events in jQuery is by using an on handler.
So notice that I'm using AJAX with this dollar sign variable and the AJAX method takes a series of parameters and one of the things that you'll learn about jQuery is that there's a lot of different ways of doing the same thing. So in addition to this AJAX method we also have a method for getting JSON files and other documents. We're going to find that jQuery has a lot of different names for the same type of things, and so in here we're going to pass a configuration object and here we'll pass along the methods.
So once we do this, then we can do jQuery's version of promises. So we actually can type in a done method, and notice that I'm chaining this at the end of this AJAX call. So I make this AJAX call and I want to do something after that. So I can use this done method and then in here we'll put in a function and we'll pass along this data variable. This data will receive the result of whatever we ask for before it, and that's pretty common with jQuery.
Everything in chains of the results of something will automatically get passed to something else and so in this done function we're going to assume that we get that data into this data variable. Now, we'd like to do something with each of the artists. So remember in our data file in this data artists.JSON I have a single element called artists and that element is an array of a bunch of different objects. So what I want to do is go through each of those elements. Well, for that, jQuery has a method called each, and so you can say for each of the pieces of data and I'm going to be more specific.
I'm going to say just go ahead and get the data and find all the artists, because the artists is where I have an array of the data. So with each of those I want you to do a function and I'll use a key and a value. So these are variables where the information is going to be stored in. So the key would be the index of the array and then this value would be whatever is in each one of those keys, and then we could just say, okay, now, I want to put that data somewhere.
So I'm going to look for a item in my DOM called info artists. That's where I want to put all of the artists. So that would be right in here, in this unordered list and go back to this. Then, in info artists then I can append and I'll just write some HTML in here. So I'll just append a list item and then I will do the value name.
So I want to get the name from each of the information and data artists. So, as I loop through all of them, I want to get just a name for right now. I mean, we don't really need to use anything else, 'cause this is just a simple example, and then we'll close out that list item, and it's always a good idea to comment this. One of the bad parts about jQuery is that you do end up with a little bit of callback heck here. So, it's a little bit confusing unless you comment things out.
So, this is the AJAX call, then this right here is the click event, and this is my jQuery ready call here. So I'm going to save that and then I'm going to switch over to my file here, and you'll notice that I'll click on load info and all of this information came right in. So this is a really good example of the type of things that you can do with jQuery super easily.
So if you're going to work somewhere in any of the 80% of the companies that are probably using this then it's definitely something that you want to be comfortable with and it's going to save you a lot of time anytime you develop for a webpage. Now here's some pages where you can get more information about working with jQuery as well as some related courses. As usually, if you have some ideas for this weekly series, maybe you want to share with me some questions you've been asked or have asked in an interview, connect with me on LinkedIn or just about any other social media network, like Twitter or GitHub @planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.