Skip to main content

Pagination, xhr and tabbing utilities for the Django framework.

Project description

A few utilities for making pagination and tabbing easier. Everything should work with and without javascript. If javascript is enabled, several features like preloading can be obtained.

Currently, we have:
  1. pagination
  2. tabbing
  3. xhr: for loading a part of the page delayed through AJAX, when it is heavy
    to render.

1. Tabbing

In the template:

> {% load ajax_utilities %} > {% tabpage %} > {% tabs %} > <ul> > <li class=”selected”><a href=”…”>…</a></li> > <li class=””><a href=”…”>…</a></li> > <li class=””><a href=”…”>…</a></li> > </ul> > {% endtabs %} > {% tabcontent %} > {% block tab_content %} > inherit this template and fill in the tab content by creating a block named ‘tab_content’. > {% enblock %} > {% endtabcontent %} > {% endtabpage %} > > <script type=”text/javascript” src=”{{ STATIC_URL }}js/ajax-utilities/tabbing.js”></script>

This is usually the base template. Every tab matches a separate view, which renders a template, derived from this base template. It will fill in the block tab_content, and mark the tab as “selected”.

If you want a link inside a tab page to be opened inside the same tab, use the tabbing-helper-class:

> <a class=”tabbing-helper” href=”…”> (something which opens in this tab) </a>

In Javascript:

> function handler(e, containers) > { > // code to be excuted when the paginator switches from page … > // containers is an Array of elements (jquery items) where content may have been changed. > } > $(document).bind(‘tabLoaded’, handler);

1. xhr

This is an AJAX optimazation for heavy web pages. The {% xhr %} template tags marks a section of the template to be rendered during a later XML HTTP Request (AJAX).

So, actually, every view which template contains {% xhr %} is rendered twice. First without the slow, heavy content, where a placeholder <div> is inserted, and later on, rendering everything.

Insert the following scripts to your HTML:

> <script type=”text/javascript” src=”{{ STATIC_URL }}/js/ajax-utilities/xhr.js”></script>

Mark the slow parts with {% xhr %}:

> {% load xhr %} > … some content … > > {% xhr %} > Very slow content > {% else %} > Loading, … (insert loading message or images, … here) > {% endxhr %} > > … some content …

The {% else %} part can be omitted, or it can contain a loading message.

If the slow content depends on calculations in the view, which are not necessary for the other content. Make sure to not execute them during the first run in the view:

> def view(request): > if ‘xhr’ in request.REQUEST: > do_slow_calculations() > > return …

In Javascript:

> function handler() > { > … (code to be excuted when the xhr content has been loaded) … > $(‘.xhr_container’).each(function () { … } ); > } > $(document).bind(‘xhrLoaded’, handler);

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-ajax-utilities-1.2.9.tar.gz (8.0 kB view hashes)

Uploaded source

Built Distribution

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page