Ajax Templates

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.

The Code

For this, you'll want to look at a couple main files in the Learn Wagtail repo.

1. Checkout the blog/models.py file for the Ajax template. And,
2. Checkout the Ajax template file.

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.

The JavaScript

This part won't be covered in the Git commit, so I'll highlight it here. There are three steps:

1. 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)
2. Make sure you've specified an Ajax template to use on the page you want to Ajax.
3. 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:

1. Right click on your page (presumably you're running localhost:8000) and select "Inspect" or "Inspect Element" (depending on your browser)
2. You'll see a new panel open in your browser, find the tiny tab called "Console" and click it. The Console will allow you to write JavaScript on your page without having to write JavaScript in a .js file.
3. Make the Ajax request with the following bit of code:
   $.ajax('http://localhost:8000/blog/')
4. 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