This course contains good reference material, but does not reflect our current quality standards.
Transcript from the "Task #2 - Details Pane" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kyle Simpson: That the work that we're gonna do on the details pane is a little more complex than that one, but less complex than the header. Okay. Check the Read Me. What does it say to do? The Read Me says you wanna set up an event handler that listens for clicks on items in the carousel.
[00:00:23] And whenever that carousel item is clicked, you pull the ID from its real attribute, and you do another AJAX request to load it in, put its contents into the content dish. Basically, it's gonna be a lot like what we did in the header file, but maybe a little bit simpler.
[00:00:43] So, essentially what I'm saying here is we wanna attach a click handler so that when I click on one of these icons, that click handler fires, it lets us know which icon we clicked on. When we go to the HTML, you'll notice that each item in the carousel has its own number, it has an ID, basically.
[00:01:07] So, we wanna grab that number, and then that is the file that we want to AJAX in. So if I click on the one that has a -0, we wanna load a file called 0.html. And if I click on -1, we load one 1.html, and so forth. Okay?
[00:01:24] So, I'm gonna get you started, and then I'll give you a minute and see if you can figure out what to do from here. So, I'm inside of the Details folder. I mean, I'm inside of the Details file, and I already have set up for you references to the variables.
[00:01:41] There's an Item's element. And a Content element, and those are the two that we are going to need. So, I want to attach a click handler to the items elements. I will say items.on, it's a click handler. I'm going to be delegating from the individual elements inside of it.
[00:02:00] So, we come back to the index HTML. We'll notice that I'm delegating from elements that all have a rel that starts with that value. So, I can say rel-
>> Kyle Simpson: Hat equals is it starts with $equals is the exist in, either one of those will work, and I want to do an event handler.
[00:02:31] Now, before I let you go on this task to try your next step, I want to suggest that instead of doing these inline functions, you pull that out as its own function declaration. This is a stylistic thing more than a functional thing. So, give it a name like personClicked or iconClicked, and use that name as your event handler.
[00:03:02] Okay, so your next task, knowing which actual icon was clicked, how are you going to pull out that rel attribute? Try that, try setting up your ID value by pulling out that number from its rel attribute. And I'll give you 90 seconds to try your hand at that.
[00:03:20] It seems like there's some people in the chat room that are mentioning that they're struggling, stuff isn't working for them. I'd recommend opening up your console and seeing if there are JavaScript errors that are happening when you're doing stuff, if you click a button and some kind of error happens here, that's a problem.
[00:03:37] That could mean that we have a variable named incorrectly or something like that. So, looking at your console while running things, if you see stuff just silently not working the way it's supposed to, check to see if you're getting JavaScript errors, and that might be a place to look.
[00:03:50] All right, so the step that I needed to do here was get the ID of the person that was clicked on, right? So, I can say var ID is equal to. Now, event.target is the icon clicked on, so we can say invent.target. Everybody with me?
>> Kyle Simpson: Now, what do we wanna do?
[00:04:10] We need to pull out its-
>> Speaker 2: Range.
>> Kyle Simpson: Rel attribute?
>> Speaker 3: Yeah, .attr.
>> Kyle Simpson: .Attr rel.
>> Kyle Simpson: Now, that's going to give us the whole value. It's going to give us js-item-0, for example. And we only want that last a little part, right? So, there's a couple of different ways to do that.
[00:04:36] But the trick that I'll use is a regular expression. And you could also do substrings by looking at its index from the back or whatever, but there's a neat little trick with regular expressions where you simply replace everything that isn't that final number with an empty string. So, I can say replace.
[00:04:56] I see the question, I'll get to in just a moment. I can do replace everything from the beginning up until that final set of digits.
>> Kyle Simpson: Which is \d, that comes at the end. And I can say, keep that thing by wrapping it in a parentheses, and everything else I'm gonna get rid of.
[00:05:31]
>> Kyle Simpson: So, if you don't speak regular expression, don't feel bad, it took me a long time to learn it as well. But, what I'm basically saying is start at the beginning of my string value, dot means match any character and star means keep going until I match something else.
[00:05:47] This parentheses set says I wanna capture that thing so I can keep it, /d is a decimal character, so it's one of the zero through nine and plus says I can have more than one of them, in case I have more items in my thing. And then what I'm replacing that whole match with is only what was inside the parentheses, so I'm basically ditching all the rest of the stuff.
[00:06:14] Yeah, sorry. I always fall into the habit. Okay, so, the hat symbol says start at the beginning of the string, dot dot star means match everything until we get to some number characters. And then the end of our string, and then $1 means pull in the stuff that was inside of this set of parentheses, okay?
[00:06:39] Quick little tip about dealing with JavaScript bugging. If you're trying to verify that you've got the correct ID here, most people do a console.log. That's the old school way of doing it. I'm gonna show you a quick way of dealing with the debugger, if you're using something like Chrome, and if you're not using Chrome, Firefox does have one, but it's not as good right now.
[00:07:02] But there's a way to set a break point, and we could do that in the editor, or we could do it in our code by typing the word debugger. So, I'm just temporarily going to insert that word.
>> Kyle Simpson: And I want to verify that I am, in fact, getting the correct ID value.
[00:07:21] So I'm gonna switch over, I'm going to open up my developer console.
>> Speaker 4: Do a save first?
>> Kyle Simpson: I thought I did a save.
>> Speaker 4: Maybe you did, I didn't see it.
>> Kyle Simpson: Yeah, it's saved. Okay, so I've got my developer console open here. And when I refresh the page, when I click on one of these items, it's gonna switch me into the debugger, because it's going to catch that breakpoint that it runs across when it finds the buggers statement, or it's going to give me an error here, so we know we have some sort of error.
[00:07:52] All right, so unrecognized expression, let's go back there and see what was I doing wrong. Because I did it in the brackets. [LAUGH] Okay. Oops. All right, let's try it again. Let's refresh the page, click on an icon, now we're in interactive debugging mode inside the developer tools.
[00:08:14] Okay? And you'll notice that we are at this break point. And one of the things that the breakpoint is showing me, if I collapse this one, because I don't care about my Call Stack. You'll notice that it's showing me my local variables that currently exist. So, I have a local variable called ID, and guess what?
[00:08:31] What's its value? It's one, which is what we expect. And a zero based system, I clicked on the second item, so I'm expecting to get ID one. Now, I could click it one more time just to verify that I get ID two, or I could get ID zero.
[00:08:48] So, I verified that my ID logic is correct. It was just a quick little glimpse at using the developer tools to your advantage, instead of always falling back on console.log. All right, let's take out the debugger, we don't need that there now. We verified that our ID statements correct.
[00:09:04] Now, what do we want to do with that ID statement? We want to make an AJAX call with it, right? That ID .HTML is the file that we want to load, so, remember we do AJAX, what's our URL? ID plus HTML. There's one additional detail here, which is that these files are actually in a sub folder called details.
[00:09:30] So, we want to put that on the beginning. So, that's the file we wanna load.
>> Kyle Simpson: We need to give it a callback.
>> Kyle Simpson: That is going to receive the contents.
>> Kyle Simpson: Actually, I'm sorry that's not how jQuery works, it doesn't use the callback there. We have to pass that into the .then function.
[00:09:52] It's gonna receive the contents.
>> Kyle Simpson: One other little thing, jQuery kind of is annoying that you have to tell it, don't parse anything, I want you to treat it as just text. So, we say data type text here.
>> Kyle Simpson: So, at this point in my code, I should have a contents variable that has the contents of that HTML file.
[00:10:30]
>> Kyle Simpson: What do we do next?
>> Kyle Simpson: Content.html, contents, $content being the variable that's pointing at our details pane. Only verify against the solutions for, and make sure I didn't mix that up somehow. I'm gonna change it just for the sake of future exercises. I'm gonna change this to LoadPerson, cuz that's what I intended to call it.
[00:11:16] So, instead of PersonClicked, I'm gonna call it LoadPerson.
>> Kyle Simpson: So, conceptually, that should be all the steps that were necessary. Let me click on an icon and load its contents into a div. So, let's try it, let's see if that works. I don't need my debug tools open.
[00:11:41] If I click on this icon, sure enough, it loaded the person in, and if I click that icon and then that icon
>> Kyle Simpson: Now, I recognize that I already wrote a bunch of code for you, but the sanity check that I want to give you here is that we did not have to write more than.
[00:12:10]
>> Kyle Simpson: Seven, eight lines of code to wire ourselves up with a fairly interesting task that we click on an element. We pull out something about that element, we make an AJAX request to a file system or to a URL to grab the contents of that file, and then we stuff it in an entirely different part of the page.
[00:12:30] We actually didn't have to do a lot of work to make that happen. And, as I said earlier, 99% of the work that we had to do was well, maybe in this case a little less than 90% because we had regular expressions involved. But 80% of the work was just using the jQuery API.
[00:12:52] Which you learn once, and then it's just a tool like any other hammer, and you can swing it.
>> Kyle Simpson: All right, any questions about task two?
>> Speaker 5: Did you get that one?
>> Kyle Simpson: Did I get what?
>> Speaker 5: That one question.
>> Kyle Simpson: What's the question?
>> Speaker 6: He was asking about that line, it's line 12 now.
[00:13:26]
>> Kyle Simpson: He's asking about this line. Yep. So, each one of these, if I replace them just to simplify, cuz we know that those are just selecting elements in the page, what we're left with is an element arrow element arrow element. In CSS, that little right hand arrow is direct descendant.
[00:13:50] So, what I'm saying is find this element then find its direct child, and then find its direct child, and those elements I'm specifying what those attribute things. So I'm saying rel equals JS carousal, JS content, and JS items. Technically, I could have probably gotten away with doing just JS items.
[00:14:16] Assuming, of course, that JS items is totally unique. Here I'm making it more unique. Theoretically, it could have another JS item somewhere else on the page, I'm making it more unique by giving it a specific path.