Check out a free preview of the full JavaScript for WordPress course:
The "Ajax Steps" 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 reviews the steps involved to set up Ajax in WordPress.

Get Unlimited Access Now

Transcript from the "Ajax Steps" Lesson

[00:00:00]
>> Zac Gordon: So this should look familiar, right? What's the only thing that's new here? Maybe someone could shout out, what do you see in here that's new, that we haven't seen before?
>> Audience Member: Dependecies ajax_url and nonce?
>> Zac Gordon: So you're right. Well, you're right that it looks like a dependency, but because we're in wp_localize_script, this is actually the content that's being pushed out to the front end of the site.

[00:00:24] But yeah, the admin_url and the wp_create_nonce. So admin_url is going to give us this, remember I said all Ajax requests go to a single URL, then WordPress redirects them? This is it, admin-ajax, and if you ever hear people talk in WordPress about man, admin-ajax is this, and admin-ajax is that, and dude, I've gotta use admin-ajax, or all this.

[00:00:48] You'll hear it eventually if you hang around long enough, or you won't, cuz you'll just use the API. This is what the admin-ajax is doing. And then the nonce, wp_create_nonce, is gonna create this on the fly, a little string of text, and we can name nonce_name whatever we want.

[00:01:02] I suggest you namespace it, and you make is specific to what the actual thing is. So we'll see something like jsforwp likes nonce, for example, and that'll be our namespace unique nonce. Then we make our JavaScript call, so this is just the jQuery Ajax, but notice a few things specifically.

[00:01:20] For the URL, we're parsing in that Ajax URL, the admin-ajax URL that we just got. And then in our data, [COUGH] first let's look at the admin _ajax_nonce, notice this _ajax_nonce, it needs to be in that format. [COUGH] So we can't just pass data nonce is equal to jsforwp_globals.nonce.

[00:01:42] We have to name it _ajax_nonce, so this is again one of the weird things. And then action is going to be the name of the function in our theme or plugin file that we wanna hook into. So in our functions.php or in our plugin file, somewhere we have a PHP function called 'jsforwp_add_like'.

[00:02:03]
>> Zac Gordon: Step 3 is inside, notice now we have this function called jsforwp_add_like. We're checking the Ajax referer, so this is where we put in nonce_name, whatever we named it before, we name it here. And if this fails, so if they passed in a nonce, but it was the wrong one, it will exit out and nothing else will happen.

[00:02:24] Otherwise we're setting up some custom code here to basically take our response. In this case we only have one thing in our response, we're setting success equal to true. And even though, so when you run a jQuery or an Ajax call, it will tell you if the call failed or not, right?

[00:02:40] You'll get some sort of method back. But what it won't tell you is that the actual WordPress code that you tried to run was successful. So for this reason, oftentimes you'll see people hard coding in a success or failure response with specific information. So let's say that in our example, we're updating the database.

[00:02:57] If that database update doesn't go through, I can control and say response success is equal to false. And then have more refined control in my JavaScript, what's really going on in terms of error reporting. In this particular example, we want our response to be in JSON format. So we're wrapping our response In json_encode, echoing it out, and then dying.

[00:03:18] Because again, this function is gonna kinda live in invisible space, WordPress will kick it out there. The Ajax hits it, grabs the data, it disappears and then goes. So we're not returning, right, it's echoing it out. We're not returning anything back. And what would other things that you could do with a function be that we're not?

[00:03:37] We're not putting it into a template, we're not actually loading it onto the page. It's just kind of appearing in memory I guess, and then we access it, pull it out, and then we're done. The other weird thing, not the last weird thing, but we're getting there. See this hook down here, wp_ajax_, and then our name of our function again?

[00:04:00] This is one of the last weird naming conventions, that _ajax_nonce is one of them, and this is another. So anytime we set up any Ajax, we have to follow this convention, and it's a little repetitive. I don't know why you couldn't just say wp_ajax and then pull it in.

[00:04:13] Well I do, but it's a little redundant, but this is the way it has to go, okay?
>> Zac Gordon: So once that happens, back in our front end JavaScript, this code was part of the bigger one, I'm just breaking off the part of it. When the Ajax call is successful, it comes back.

[00:04:32] And then notice that this response type success, I set that, that was my own custom response. So jQuery already succeeded when it hit the success and is running this code. But I added an extra layer in, and I could say, okay, now, go do my code. And if it's not successful, then I could give it some specific message and be more detailed about exactly what I want back.

[00:04:55] So [COUGH] again, these are the different steps, and this is the last thing I want to hit before we go into break. Because after this, when we come back, then we'll start looking at just API and we'll focus on that for the rest of the day. So this is the kinda culmination of the old school JavaScript for WordPress.