Skip to main content

JS and HTML to support the Django contrib.messages app

Project description

jQuery messages-UI plugin package for Django

django-messages-ui adds JS and HTML to support the Django contrib.messages app. It should be called on the message list element, and accepts options for message selectors, transient messages (that disappear on click or key-press), and close-links.

Messages can be dynamically added via ICanHaz.js, and there’s a Python middleware to automatically add messages from the request into Ajax JSON responses.



In your Django project settings, add “messages_ui” to your INSTALLED_APPS.


Linking the JS:

<script src="{{ STATIC_URL }}messages_ui/jquery.messages-ui.js"></script>

Including the default HTML Template:

{% include "messages_ui/_messages.html" %}

Calling the plugin:


Calling the plugin with a variety of options explicitly configured to their default values:

    message: '.message',          // Selector for individual messages
    closeLink: '.close',          // Selector for link to close message
                                  //      ...set to ``false`` to disable
    transientMessage: '.success', // Selector for transient messages
    transientDelay: 500,          // Transient message fade delay (ms)
    transientFadeSpeed: 3000,     // Transient message fade speed (ms)
    handleAjax: false             // Enable automatic AJAX handling

Note: After the plugin is called once, subsequent calls on the same element will default to the options passed the first time, unless new options are explicitly provided.

Adding a message in JS (requires ICanHaz.js):

$(ich.message({message: "Sample Message", tags: "info"})).appendTo($('#messages'));

To override the default JS template, add a message.html file to a directory listed in your ICANHAZ_DIRS setting (a django-icanhaz setting).


To enable automatic handling of messages from Ajax requests, add "messages_ui.middleware.AjaxMessagesMiddleware" to your MIDDLEWARE_CLASSES setting (directly after django.contrib.messages.middleware.MessageMiddleware), and pass handleAjax: true to the plugin initialization.


AjaxMessagesMiddleware converts all HTML AJAX responses into JSON responses with a messages key, and the HTML embedded in an html key. If your site uses HTML AJAX responses, this will likely require updates to other Ajax-handling code in your site.

Similarly, handleAjax: true globally sets the default expected dataType for AJAX requests to "json".


0.1.7 (2012.11.06)

  • JS stop transient-message fade on close-link click.

0.1.6 (2012.10.05)

  • JS don’t parse non-json.

0.1.5 (2012.07.23)

  • Don’t touch non-200 responses.

0.1.4 (2011.07.14)

  • JS cleanup; added JSLint options.

0.1.3 (2011.06.28)

  • Added closeLink: false plugin option.
  • Subsequent plugin calls on the same element default to previous options unless explicitly overridden.

0.1.2 (2011.06.27)

  • Added AjaxMessagesMiddleware and handleAjax plugin option.

0.1.1 (2011.06.27)

  • Updated HTML template (removed <aside> and moved #messages to <ul>).

0.1.0 (2011.06.25)

  • Initial release.


Project details

Download files

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

Filename, size & hash SHA256 hash help File type Python version Upload date
django-messages-ui-0.1.7.tar.gz (6.4 kB) Copy SHA256 hash SHA256 Source None

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN SignalFx SignalFx Supporter DigiCert DigiCert EV certificate StatusPage StatusPage Status page