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() 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.
This part won't be covered in the Git commit, so I'll highlight it here. There are three steps:
- Make sure you have jQuery (full) with Ajax support. jQuery slim doesn't have Ajax support. (Or if you're a JS dev, you can write your own Ajax function)
- Make sure you've specified an Ajax template to use on the page you want to Ajax.
- Make the Ajax request to the page with the Ajax template (jQuery code below)
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:
- Right click on your page (presumably you're running localhost:8000) and select "Inspect" or "Inspect Element" (depending on your browser)
- Make the Ajax request with the following bit of code:
- If it worked, you'll be able to click into the line of code it provided and then click the "Response" tab. And if you have a custom ajax_template, it'll show you whatever you put in there!
If you got stuck
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.
The Git Commit
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
Was this helpful to you?
Sharing is caring. Help the community by sharing this article.