In this tutorial we'll learn how to Ajax a template and have different data (different from a regular GET request) returned to us. This is great for features like: endless scrolling (large blogs) or swapping out data on a page for something new. All without having to refresh your page so it feels very modern.
Depending on your application, there are times when you'll want to add some extra effects. I'm not talking about fade ins or other types of animations, I'm talking about Ajax.
Ajax (Asynchronous JavaScript and XML) is a browser feature that lets you send a request for data to your server without having to reload the page. And in the same request for data, eventually the server will give you data back (called a response).
In this video, we won't be covering JavaScript event listeners, but we will be working with jQuery's $.ajax()
function to request data from a page that already exists, but because it's an Ajax request (and not a regular GET request) we'll return a different template with different data.
For this, you'll want to look at a couple main files in the Learn Wagtail repo.
After you have these two pieces setup in your project, you can move on to adding the JavaScript component, which will give you the ability to Ajax the new template without changing the URL.
This part won't be covered in the Git commit, so I'll highlight it here. There are three steps:
Lastly, once you have your ajax_template specified (and the template exists) you'll want to test it out. Follow these steps to reproduce what I've done in the video:
$.ajax('http://localhost:8000/blog/')
ajax_template
, it'll show you whatever you put in there!If something didn't work out the way you were expecting, or something broke along the way, I provide a lot of support in the video. It's about 17 minutes, but it'll show you everything I'm talking about in this tutorial, step-by-step.
If you'd like to see what was changed between this tutorial and the previous tutorial, the entire git commit can be found here: https://github.com/CodingForEverybody/learn-wagtail/commit/a5d2692db8a55ef672cd46e85a2122cf81cd6ceb