Page switching using AJAX in Django

Question

I am trying to create site navigation using AJAX. I have navigation menu with links to different views (using {% url name %} in template). The thing I am trying to do is to load the page content using AJAX. The page content I am trying to load is enclosed in content block ({% block content %}).

I also found this snippet http://djangosnippets.org/snippets/942/, but I want to use the views I have already defined and only get the content using ajax.

Any suggestions?

Answer 1

You should use django-pjax which is built exactly for that kind of thing.

All you will have to do is to, in the base template, include the whole page or just the block content based on whether the request is ajax or not.

django-pjax does the AJAX calls using the jQuery and manipulates history using HTML5 push state API, which is a very good way to do it and also gracefully degrades in IE older versions.

Answer 2

Template tags like {% block content %} are long gone by the time AJAX sees things. What you want to do is create a named <div> in your content block, like:

{% block content %}
<div id="content"></div>
{% endblock content %}

Then you can use something like this (jQuery) code to load the <div> when needed:

$("#content").load(url, data, loadComplete);

where url is the URL you want to load (HTML expected in return), data is the form data (if any; can be omitted), and loadComplete is the optional function to be called when the data is loaded, and is of the form function loadComplete(responseText, textStatus, XMLHttpRequest) {...}. Even if you don't want to use jQuery, you can get the non-minified jQuery source and see how they do it.