Check out a free preview of the full JavaScript for WordPress course:
The "Challenge 5: Solution" Lesson is part of the full, JavaScript for WordPress course featured in this preview video. Here's what you'd learn in this lesson:

Zac walks through the solution to Challenge 5.

Get Unlimited Access Now

Transcript from the "Challenge 5: Solution" Lesson

[00:00:00]
>> Zac: Let's go ahead and look at this together, shall we? AJAX and WP, go ahead and copy over all of these 3.1 through 3.2 files into your plugins folder.
>> Zac: So again, we're copying just over our 3.1 files, Into our plugins folder. [COUGH] And let's go into our plugins.

[00:00:30] So, let's come down and activate 3.1 jquery example. All right and now again, we need to make sure that we're not opening the actual example files that wherein the repo but we're opening the ones that are in our plugins directory. So I'll just grab that and pull it into my editor.

[00:00:52] And now I've got my plugins here. All right, so, in our README, there's a few steps here. Right, we've got to set up the enqueue to pass in all the data, we've gotta hook in our AJAX function, we've gotta make the actual AJAX call in our JavaScript, and then we've gotta test out that it works.

[00:01:18] So, let's start up by going into our main plugin file ,we're gonna look for our scripts find localized scripts and we are basically just gonna make sure that we are passing in the url we need the total number of likes that are currently in the data base and then the nonce, okay?

[00:01:36] So that's our first step, we will open up main plugin file
>> Zac: And we already have this done for us. So, nothing we need to change here. And again, because we've done this so much, we won't go through the practice of changing those values every time. But what we do need to change, is all of this.

[00:01:58] So, let's just do some quick copy and past here, make it easy. We're gonna change ajax url to admin url, admin ajax dot php, total likes is equal to, and this is why the options table is so easy, look how easy it is to pull in a value from the database.

[00:02:18] Just get option and then the option we want and it was actually up here further in our code, at the very top we see, hey are there any likes currently and if it's null then go ahead and set likes equal to zero, so that's how we get the number to start off.

[00:02:34] Get option and add option are very simple and if you ever want to start storing stuff in the database, little things, that's a really easy way. And then finally we need to create the WP nonce. And again, I like to name them something that is going to make sense for what it is and sometimes I'll just add the word nonce's even though it's repetitive.

[00:02:55] Just to make it clear for me what I'm working with, show me what you're working with, okay. So we've got all that set up, let's see, the next step was to hook in our AJAX function. Okay, so this is gonna run once our JavaScript executes. And we want to find the add_action function directly after jsforwp_add_like, okay.

[00:03:18] So let's go check that out. Here's jsforwp add like, and while we'll get to the add action in a moment, but there's something up here. Notice that check_ajax_referer doesn't match what we just set it to. So this name here, create_nonce, needs to be the exact same as what we see down here, nonce_to_check.

[00:03:40] So paste that in, that works and just to show you what this is doing is saying is getting the value of the database is increasing it by one and then it's updating the option and passing in the new number, and this could definitely be consolidated a fewer lines but just trying to make it clear.

[00:03:59] And then we're saying if this goes through, so if the update passes then go ahead and set my response total likes to new likes and set their response type equal to success. So this is gonna be the data because we have response total likes bein json encoded, that will turn into response dot total likes and response dot type.

[00:04:22] When we get it back on the front end. Now the last thing we have to do is this wp_ajax_your_hook, and your_hook right here, have to both be changed to jsforwp_add_Like. And what that's gonna do is say, whenever there's an ajax request coming in for this function then go ahead and call this function, which is again right here, super redundant but this is just how Ajax works and once you know these few steps, it's fine.

[00:04:57] You'll also notice, because I wanted to simplify this, there's some extra code that I'm not showing you, that's put out into a little library folder that we will ignore for now. But just so you know, if you want to explore some of the other stuff that's going on, because there is a back end page, and I'll show you that in a second.

[00:05:15] But we won't go through all of the code, it should already be working.
>> Zac: All right, so now we need to come into our JS front end and we've got some things to change here. All right, so change the HTML value to response total likes because we set this up in the back end and we passed it back here, we could simple do this.

[00:05:42] So response just like global variables we set is available to us. It's getting kicked back, and now we need to.
>> Zac: Okay, this is gonna load initially so when the page loads is what determine what the total likes are to start and then here's our ajax call, and we need to update a few things, the url, the data action and data _ajax_nonce.

[00:06:07] Again, this is a little bit weird format just keep that in mind. So we'll change our URL.
>> Zac: That's gonna go to admin ajax. We'll change our add_like that was all ready. And then our nonce is right here.
>> Zac: Okay, should we try it? Who thinks it's gonna work?

[00:06:45] Did we miss a step. Let's come check our read me. Changed all that stuff. I think there's one last thing. Once it is successful, then we want to change the count to the total number. So then we pass in response total like, which again has been Updated and given to us, so that should fix everything.

[00:07:10] Now let's go ahead into our site. We activate 3.1 JQuery example.
>> Zac: And you'll love how much,
>> Zac: Broken this is, okay, let's see what's going on. Response is not defined in front end.
>> Zac: Yeah. Because the first time we get it, it is
>> Zac: it's actually js for wp globals.

[00:07:46] So the first time the page is loaded this localized script kicks off but it's important to note that localized script is not updated every time you make a new ajax call. So, this is good for the first load of the page but after that it's static and doesn't get repushed out to the site.

[00:08:02] So the first time we get the total count, we have to do it that way. And then the second time we should be able to get response. So sorry, that instruction is a little off. I’ll make sure to change that in the examples. Zero likes, [SOUND] look at me go.

[00:08:20] No validation, I don’t even remember if it’s set to you do have to be logged in. So because it's relying on sending out that nonsense stuff, it's not going to let us perform this if we're not logged in, which is a good thing. But you'll also notice that, on the back end now in our admin page, we could reset it to 0.

[00:08:44] So remember I said there's this extra library folder. And it's just the exact same code, except showing you how to reset all the data to 0. And now if we look at our site, it will be set back to 0 and we could do the whole thing again.

[00:08:58] So again, this code is going to be something you wanna save as an example because at some point, you might need to use it. But we're moving past this direction in terms of architecture of how we're interacting with Ajax it's being driven a bit more API instead which is what we'll look at moving forward.

[00:09:19] But from here there are two things that you could try. The first is you can go back and look at the library folder and look at the plug in page. And this has some code that is running something very similar but it's resetting everything to zero using AJAX.

[00:09:39] And there's a backend main JS. Because what happens is sometimes folks get like the code that shows, hey, here's how you do this on the front end but then it's confusing. Like, I don't know how to translate that to doing it on the backend in a plugin. So I'm giving you both there And then because,

[00:10:00]
>> Zac: jQuery is not everybody's jam, there's also an Axios example. So we won't go into that there and that's kind of on your own to play with. But I'll show you just one small piece of code that's gonna be kinda the main difference is that, notice that this is called params.

[00:10:22] I think that's basically it and then it's using a slightly different format in terms of how data is coming back and how you access that. So, those two are really the only things. The rest is pretty much the same. But these are the things that have to be right.

[00:10:40] Everything else you could swap out and change to your heart's desire. So at this point, we have so confidently plowed through so much. And everything else out from here is gonna be looking at the API and how do we get this in themes and plug ins and decoupled apps, okay?