Join Morten Rand-Hendriksen for an in-depth discussion in this video Use AJAX to load subsequent responses, part of WordPress: REST API.
- [Tutor] To improve the user experience of my app, I want to do a couple of things. First, I want to highlight which post I'm currently looking at by giving it a solid background color, so that it clearly links with the post. To do that, I'll append a class to the current, active item. That also means any time I change items, I need to remove that class from the previous items. I've already created that class in my CSS, it's called current and it just puts a background color to the items. Now I need to place it in the right place, so going down in my code here, I have the get_post function down here.
That's when I get an individual post. Off the very top here, I first want to remove any class, that's appended to the list currently, because we can assume that we've switched posts here. So I'll say, navigation-list a, and for all the items, we're going to remove the class, current. Then I'll grab the current item I clicked on and append that class to it. Now that current item I clicked on is the one that was triggered here, in post_trigger, so when we click on an item here, we're calling get_post, and that means get_post knows what the current item is, it's inside the variable called, this, so I can grab this, and then say, addClass current.
Save that, back to the site, reload some content and now you see the current class is highlighted. Switch to a different one and now you very clearly see which post you're currently looking at and that makes for a much better user experience. But I still think we can do better. How about adding a loader next to each of these links for as long as the content is being loaded, so the visitor clearly sees something is happening. In the HTML, we already have that loader here, the div class nav-loader with the image source JS/spinner.svg and ajax-loader, and in the CSS, I've added some really basic CSS to handle this new scenario, we're going to use.
So to add in the loader, I'm going to append that to the current element here. So I'll just say, append, and then I'll use that exact same markup, just grab markup from index HTML and paste it in here, save, go on reload again, and now you see the loader appear here, but of course, it's not going away, so this is getting kind of ridiculous. That means I need to get rid of the loader, once my function is complete. I can do that by going into my ajax function here, and you'll remember we have always at the end, always triggers after either done or fail, so inside always, I'll just say ajax-loader remove.
That would remove all ajax loaders on the whole page, which is exactly what I want. Test that out. Maybe spell it correctly. Try one more time. And now you see the loader appears for as long as the content is loading and then it goes away afterwards. That's cool, but I want to do one more thing. I want to clearly indicate to the visitor that something is happening over here on the right hand side, while we're loading. So I'm going to change the opacity of all the content for as long as a new post is loading up, so the visitor clearly knows, "OK, so I did read "that content, but now I'm loading something else instead." For that, I've created another custom class called, loading, that just sets the opacity of any item within the loading element to point 25, that's pretty transparent, and I want to append that class to the entire content here.
Now inspecting this element, you will see that all this content is contained within main-area, so that means if I go to load_post here, go to get_post, where I just set up my loader, then directly below the spinner, I'll find main-area addClass loading, and then just like with the spinner, I remove it down in always, save, load up the site a final time and you'll see when I click on a link here, that the content over on the right hand side fades out and then gets replaced.
Now of course, this is only the tip of a very large iceberg of what is possible. What I'm trying to show you is that adding tiny little UX features, like loaders or faders and things like that, provide a much greater user experience for the visitor, because when we're using the REST API and loading content in dynamically into the browser, there is a delay every time we're making a request to the server and as you go through all this, once the delay appears, the visitor will sometimes think something is wrong. By adding a loader or fading content, or doing something else, you're telling the visitor, "Something is happening, just wait a little longer." Of course, you should also add proper error reporting, so if the loader spins forever, and nothing is happening, you should create a trigger, that kicks in and says, "Oh, something went wrong, you should try again." None of that exists in my app, because this is a proof of concept app, You should not publish this to the web.
You should make something better. But at least you now have a framework, that shows you how you can use the WordPress REST API to create a standalone app, not connected to WordPress, that still pulls content from WordPress and displays it in a functional way in a browser.
- Using a REST client to communicate with a REST API
- Reviewing available routes, endpoints, and arguments
- Adding custom post types and taxonomies
- Altering the API response
- Using PHP for resiliency
- Passing info using wp_localize_script()
- Setting up a REST API request through AJAX
- Outputting selected post data to the front end
- Formatting post data to match a theme
- Triggering AJAX for an infinite scroll effect
- Using AJAX to load subsequent responses