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

Use load:

$('#tag_cloud').load(' #tag_cloud')

(Note the leading space in the load parameter; this specifies an empty string [which evaluates to the current page] as the source, and "#tag_cloud" as the fragment to load)

This will actually load #tag_cloud (including its outer html) into #tag_cloud, so you'll essentially get the following structure in your DOM:

<div id="tag_cloud">
    <div id="tag_cloud">
        <span>tag</span> ...

To fix this, just unwrap the children:

$('#tag_cloud').load(' #tag_cloud', function(){$(this).children().unwrap()})

---

Oh, by the way... you can try this here on SO! Just paste the following into your Firebug console, and watch the sidebar auto-reload. You'll notice some scripting code poking through; that's jQ's HTML-safety filters disabling the <script> elements for you (which can be annoying at times).

$('#sidebar').load(' #sidebar', function(){$(this).children().unwrap()})

Answer 2

First, it looks like your code is broken - this is not a valid Javascript/jQuery instruction:

$('#tag_cloud).html(data);

You need to add the missing quote:

$('#tag_cloud').html(data);

As for refreshing only a single div, I would extract contents of that div to a separate template my_div.html, include it in the main page template using {% include "my_div.html" %}. Then, in my AJAX view, I would render and return only that rendered my_div.html.

Answer 3

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.