- [Instructor] Now we get to the fun stuff.Using the information we have right now, we can runa function when the previous post button is clickedthat grabs the data ID, which you'll remember is the IDfor the previous post,then combines that ID with the rest_url to createa URL resource request for the API and then put that URLinto an Ajax function to get the data from the ReST APIand output it into the browser console.All of this starts by trackinga click on the load-previous anchor.

I'm going to wrap that in its own function so that it cancall it back later, and I'll explain why in one second.So first, I'll set up a new function calledprevious_post_trigger, and inside this function,I'll grab the link, load-previous a,then on click, I'll run a separate functioncalled get_previous_post.Now, why would I want to place this triggerin its own function?There's a simple explanation.

Right now, when you look at the post, there's a link here,and that link sits inside the dom, which meansthat the Javascript is aware of the linkand this Ableton track with it.However, when we run the full function and pull inall our Ajax and then display another post,this link will go away and be replaced by another post,and then at the bottom of that post,there will be a new link.The problem is that link, the new one,was not there when we originally loaded our Javascript,so the Javascript is not aware of it.By placing the trigger inside a function,we can then call the function againwhen we get to the end of our Ajax call.

The function gets reinitialized, the dom gets re-scannedby the Javascript, and it will discover the new linkpointing to the next previous post,and everything will work.So, we'll wrap the trigger in a functionand then call the function.That will trigger it right off the batwhen we load the page.Then we'll set up a new function that runs the Ajax call.That would be get_previous_post, and this is the functionwhere all the magic happens.The first thing we need to do is create the URLwe'll pass to the ReST API.

That URL needs to consist of the rest_url itself,then slash, posts, and then we need the IDfor the previous post, and that ID sitsin the data ID property on the link we just clicked.So, we'll start by grabbing that item, var previous_post_ID.I'll set that equal to dollar sign, then we'll grab this,which is the current click item, attribute,and here, I'm looking for the data ID attribute.

That will give us the data ID attributeof a link that was just clicked.Then we'll set up a new variable, call it json_url.Inside this variable, we'll take the rest_url,which we already have, plus, then we'll put in posts/,plus, and then previous_post_ID.This gives us the complete URL to pass to the ReST APIto give us the resource back.Then we have to run Ajax on this URL,so I'll set up a new Ajax function.

Here, we're looking for a json data type,and the URL is this json_url we just created.Here, I'll use the pseudo-promise structure of jQuery Ajax,and we'll start with done.That means everything worked the way it was supposed to.If everything worked, we'll set up a pseudo functionthat grabs the object.That would be the object that's being returned by Ajax,and for now, we'll just dump that object outinto the console log so we can take a look at it.

If, on the other hand, something goes wrong,fail, we'll set up an anonymous functionthat just console logs error,and finally, I'll set up an always conditionthat runs regardless of what happens,and here, I'll put outconsole.log.('AJAX complete'),just to tell myself that everything is finished.Close everything with a semicolon, save, and now,we can go back to the browser, open my inspector,reload the page, make sure I have the current active code,then open the console and click the link.

If everything works correctly, I should now get an objectin my console log, and we can take a look at that object,and here you see this is the output from the ReST API.So here, we have the post itself.We have the date, the date_get,and we have the ID and the linkand the meta and the modifiedand everything here is in alphabetical order.That's why it's structured differentlyfrom what you're used to.But this is the exact same objectthat we would get if we did that call in Postman.That means everything is working.Now, if this is the first time that you've seen Ajax,I'm sure you're going, woah, woah, woah, slow down.

What exactly is happening here?So let me run through this one more time.When the Javascript loads,it first loads up the function previous_post_trigger.Previous_post_trigger finds the link inside load-previous,and when that link is clicked, it triggers a new functioncalled get_previous_post.Inside get_previous_post, we first grabthe data attribute for the currently clicked link;that is, the data ID for the previous post.Then we combine that data ID with the rest_url and posts/to get the full request for the ReST API resource.

Then, we run an Ajax script that asks for a json data typeat the URL, json_url that we just created.If everything succeeds, we get an object back,and then we just return that object in the console logso we can see it.That's what you saw.If something goes wrong, we just get a messagein the console that says error,and once everything is done we get a console log messagethat says Ajax complete.What you see here is that everything worked properly.We get the object that hasall the data from the previous post,and then we get Ajax complete, and finally, an error causedby something that has nothing to do with what we were doing.

All of this means everything is working properly.Ajax is getting the data we need from the ReST API,and the only thing we have to do now is take that dataobject we got returned from the ReST API, wrap some of itin some fancy HTML, and then output it in the browser.

Resume Transcript Auto-Scroll

Author

Released

3/23/2017

Developers can interact remotely with a WordPress site from a client-side or external application by using the WordPress REST API. Using JSON objects, this API allows you to create and send content to a site, request information from a site, update existing content, and even create single page applications on top of WordPress. This course takes a detailed look at putting the WordPress REST API to use, demonstrating the use of routes, endpoints, arguments, requests, responses, and more. Technologies covered include RESTful APIs, JSON, HTML, CSS, JavaScript, PHP, and AJAX.