Refresh a div in Django using JQuery and AJAX

Question

I am trying to refresh a certain part of my page with AJAX and JQuery (in Django). How can I get it to redisplay only the div, rather than the whole page.

Answer 1

In our project, we had too many separate Ajax views, that it made sense to write a middleware and reuse the same views. I recently created an application that lets the client request parts of any page.

Let's say, a page /usual_page/ has this template:

{% extends "another_template.html" %}
{% block title %}Usual page{% endblock %}
{% block content %}...{% endblock %}
{% block my_widget %}widget code{% endblock %}

If you install the middleware and make a GET request like /usual_page/?partial=my_widget, it will send the client this data:

{"blocks": {"my_widget": "widget code"}}

Or, if you do /usual_page/?partial=title,content, it will send the following:

{"blocks": {"title": "Usual page", "content": "..."}}

Other blocks, that are in the parent template, can also be requested. It doesn't matter where the block is in the hierarchy, it only matters that it is present in the normal page (the one without ?partial parameter).

In the BitBucket repo, I have a demo project that has a module that automates the work. It lets you use History.pushState trick and load parts of pages and insert them into the document.