Check out a free preview of the full Organizing JavaScript Functionality course:
The "Task #1 - AJAX" Lesson is part of the full, Organizing JavaScript Functionality course featured in this preview video. Here's what you'd learn in this lesson:

Kyle wraps up the solution to the first task by performing an AJAX request and displaying the modal dialog.

Get Unlimited Access Now

Transcript from the "Task #1 - AJAX" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kyle Simpson: The element that was clicked on is an atag right which has an href in it. And that href is the URL that we want to load, we want to load that file up we essentially want to make an Ajax request for that file get its contents and stuff it into a model.

[00:00:17] So I can get the URL by looking at the element that was clicked on, which is going to be evt.target, that's the link that we clicked on. And I want to jQueryify that element because I want helpers for it. So I'm just gonna wrap $ for in to see around that element and I want to get it's href attribute in the way we do that in JavaScript is .attr("href").

[00:00:59] Just double check myself against the solution file here.
>> Kyle Simpson: Okay, so now I have the URL, jQuery has a nice simple syntax for doing Ajax. If you don't want to type this part you're free to kind of just copy and paste it which is what I'm going to do because I don't want to type it.

[00:01:37] So you can copy and paste from the solutions file if you'd like but this is how we do an Ajax call. I'm giving it the URL and I'm telling it that I'm expecting to get back text, so that it doesn't do any parsing and this dot then is basically how I specify my callback.

[00:02:02]
>> Speaker 2: Just wondering why you didn't use prevent default?
>> Kyle Simpson: We did use prevent default but the question is why did I do the other two? We don't have to do the other two in this example, I just did it because there's a habit that I do. Like I call all three of those usually just by habit but in our particular situation, we actually don't care about the propagation.

[00:02:24] We only care about stopping the default behavior so it would be acceptable if you didn't put them in.
>> Kyle Simpson: So once I've loaded the contents up as an Ajax request, remember that looks exactly like we did before. There's an Ajax call and I get a callback then I get some contents back.

[00:02:44] Now I need to add that to my modal. So we don't have this variable yet, but we can declare this variable and have that variable point at the modal, that's going to be our last step. We wanna declare a variable called modal and we wanna get at it the same way we get it any other variable, didn't understand the URL line, okay?

[00:03:16] The first thing is to get the element that was clicked on, that's what evt.target is and then the link, the A tag that we clicked on we want to get its href attribute. When you get the value of the href attribute.
>> Kyle Simpson: So in our index that would be getting as register.html or the login.html, that's the value we want to get.

[00:03:53] Okay, so how are we going to get a reference to the modal that we want to click on? Or I mean that we want to add content to? Other we get reference so that we come to our markup and we find that there's a modal there with real js-modal.

[00:04:12] So we get it exactly the same way we're getting the other ones which is to say rel=js-modal.
>> Kyle Simpson: I have a stylistic convention that you see on line three. Which is that any variable that I declare in my code which points at a jQuery object. I always prefix my variable names with dollar signs, just to make it clear that I'm dealing with a jQuery.

[00:04:46]
>> Speaker 3: There's nothing actually special about the dollar sign, is there?
>> Kyle Simpson: Not in variable names, there is not, yeah?
>> Speaker 2: There's the few questions there. Could we have used $this? You didn't cover that question?
>> Kyle Simpson: I didn't covered that question, the question is basically if I do need to do event the target or could I have used this.

[00:05:05] You do not want to use dollar sign thus, I know that many people are familiar with and have seen that in a lot of places, it is not as reliable as you would expect. In our particular case it would have worked but there are lots of other cases where the event propagation that is the bubbling stuff where it doesn't point at what you want.

[00:05:27] jQuery make sure that event the target always points at the thing that got clicked on. So it's a reliable parameter and that's why I always use it out of that habit.
>> Speaker 2: The question is, is .NET native to JS?
>> Kyle Simpson: This is part of the jQuery, let's talk then that's happening here, that's part of just crazy.

[00:05:55]
>> Speaker 2: So you're saying that that's not a promise.
>> Kyle Simpson: jQuery is not using real promise. jQuery is doing their own version of stuff that looks a little bit like a promise, but isn't. The other question is our native promises coming to JavaScript? Yes, they are coming to us six.

[00:06:12] It's just that these are not made of promises so the dot then that you see there looks like it's a native promise, but it's actually just a jQuery API.
>> Kyle Simpson: I might've lost some of you already even though I walked you through it, and that's totally okay. Don't feel frustrated and walk away, walk out on me.

[00:06:37] The point that I'm making here is that we're already using some of the concepts that we talked about in our earlier course. For example, we're passing in a callback function, all right. So if I just hid all of the contents of Johnny's a little trick in sublime. That does code folding, okay.

[00:07:01] So I just hit it temporarily, I'll bring it back in a minute but if you look at this function. I mean if you look at this dollar sign is a function, on is a function and if you look at the parameters that are being passed to the on call.

[00:07:16] There is three parameters being passed, one of which is a function that we passed and it's a callback. Exactly like passing a callback into a set timeout or passing a call back into any other utility. We're passing a call back, we're asking for this callback to be invoked, to be run.

[00:07:34] Whenever somebody clicks on a link, it's not going to happen right away. They're going to wait a few seconds and we want it to happen whenever it does.
>> Kyle Simpson: Okay, so you're back here.
>> Kyle Simpson: All right, so if we Save this file and we reload our page to Refresh our page.

[00:08:10] If I didn't mess something up now when I click Login, it pops up a modal with the login contents in it. Now I don't have any close buttons or whatever we do that later in the exercise. So right now we just pop up a modal but if I Refresh and obviously it refreshes the page and goes away.

[00:08:27] If I click Register I get the register page loaded. So that's the step that you should be at is being able to load that content and put it in a modal. P-R-O-P-A-G.
>> Kyle Simpson: The good news is [LAUGH] if this was complicated and you got lost or you feel a little bit intimidated by this, which is totally okay.

[00:09:03] The first time I saw code like this I was lost, trust me. If this is complicated to you, the good news is that this is about as complex as jQuery programming gets. I started you off with an example that kind of, it shows a lot of different pieces moving in.

[00:09:21] Pulling in an element from the dom, that's what this first call is doing. This is pulling in an element from the dom by its rel attribute, the same thing we did with modal. Calling a method on that chain, calling .on and giving it several parameters, making an Ajax call setting the inner html of those contents, showing an element.

[00:09:42] This is basically like 80% of what people do with jQuery in this one little snippet. So even though it may feel like while this is kind of like, overwhelming or whatever. If you take some time to digest just this one file you've actually probably got the same amount of skills as 50% of jQuery developers have.

[00:10:04]
>> Kyle Simpson: And the other thing to note is that we didn't do anything tricky with JavaScript itself. 99% of the complexity that we see in this file is jQuery related, not JavaScript related. So if you spend time to learn a tool like jQuery, like I've taken time to learn, then you can sling about the jQuery stuff, and it just works and the same is true of JavaScript.

[00:10:29] If you learn the JavaScript fundamentals, you can sling JavaScript around and you won't get confused. So this is just another thing to learn, it's a jQuery library that's helpful. It makes the code to do this without jQuery would be worse. So even though it may look ugly it's better than it would have been.

[00:10:46] Question here, why not using a comma role js controls? You totally could have done it that way, I don't like to use tag names or IDs. I try to avoid dom specific things like what tag name was used or whatever. So that's why I would avoid using A but there's lots of different ways to use the jQuery API, this is just one of several.

[00:11:15]
>> Kyle Simpson: What else did you work on after header dodginess I didn't. The only code that we've changed right now so far as header.js.
>> Kyle Simpson: Yup, header.js is all we touched, okay. Any questions here about stuff I can clear up for you. It would have been rather cruel of me to expect you to just know all this stuff that's why I walked you through it.

[00:11:42] Fortunately, the next thing that I'm gonna ask you to do is going to be a bit simpler. It's gonna build off of some of the stuff, you wanna have your file in that state. If you don't want to retype all that stuff, just copy and paste that whole file from.

[00:11:59]
>> Kyle Simpson: Over there, which is totally fine if you want to do it that way.