Adjax in your templates

For some of the more useful features in the Adjax framework, such as data value updates and section reloading (template inclusion), you’ll need to make use of some template tags.

Data value updates

Data elements can be marked for updating the {% adjax %} tag. Simply use the tag on a django object as you would when presenting the data using a {{ myobj }} variable tag. Filters are not yet supported.

{% load ajax %}

<p>My name is {% adjax my_obj.name %}.</p>

The resulting HTML looks something like this:

<p>My name is <span class="d-d2z8sbbs2b7p212yfno8mi81djjnbqf">Tree</span>.</p>

To just get the value of the key used (for use in eg custom javascript processing of the returned data), use the {% adjax_key %} template tag:

{% load ajax %}

<p>The key is "{% adjax_key my_obj.name %}".</p>

The resulting HTML looks something like this:

<p>The key is "d-d2z8sbbs2b7p212yfno8mi81djjnbqf".</p>

Section Reloading (template inclusion)

You can include a template which you intend to reload using Adjax by using the {% adjax_include %} template tag. The tag simply takes an argument being the name of the relevant template.

{% load ajax %}

{% adjax_include "myapp/template.html" %}

The following HTML is then generated:

<div class="tpl-b4hf2396929rw5tjfaqni5077m41d2b">
  Here is the content of the included template.
</div>

There are also two optional arguments to the {% adjax_include %} tag. The first is prefix, for adding a prefix to the class name (eg tpl-left-abc123xyz). This is useful where the same template is included twice or more on a given page, and you don’t want to update all of them together.

The second optional argument allows you to customise the wrapper HTML element. By default it is a <div> element.

Here are the two optional arguments in action:

{% load ajax %}

{% adjax_include "myapp/template.html" prefix="left" wrapper="span" %}

The following HTML is then generated:

<span class="tpl-left-b4hf2396929rw5tjfaqni5077m41d2b">
  Here is the content of the included template.
</span>

To just get the value of the key used (for use in eg custom javascript processing of the returned data), use the {% adjax_include_key %} template tag:

{% load ajax %}

<p>The key is: "{% adjax_include_key "myapp/template.html" prefix="left" %}"</p>

The following HTML is then generated:

<p>The key is: "tpl-left-b4hf2396929rw5tjfaqni5077m41d2b"</p>

Named elements

Adjax allows you to give HTML elements a name, which can be referred to in your views. The name you choose is then encoded and can be used in the templates. This approach is encouraged, as opposed to refering to the html classes, IDs or elements directly in your python code. There are a number of benefits:

  • HTML/CSS isn’t constrained by the python code
  • HTML/CSS can be changed without changing or retesting the python code
  • The python code can be written without knowing the HTML structure or the names of classes
  • Names chosen to represent elements can be more meaningful to the python developer than existing classes

Eventually this may become the only way to hide/replace HTML elements using the Adjax API.

{% load ajax %}

<span class="{% named_element "my special element" %}">Hello World</span>

The following HTML is then generated:

<span class="n-puplfq3ch3bd9peq6212nk3tht5631y">Hello World</span>

And you can refer to your element in your view:

def my_view(request):
    adjax.hide(name="my special element")
    return adjax.response(request)