Stylizing Django messages on the frontend
I just like the way django messages framework work, but I hate it when theres no pretty way to show them to the user, so I found this, dont remember exactly where, so to the creator I owe you the copyright #SOPAsucks!
So anyways as I was saying or writing, I've been using the following instructions to show django.contrib.messages in the frontend to the user in a stackoverflow.com kind of way.
First of all you'll have to use the google jquery library or download your own, (but I rather use the googleapis jquery, here's why).
I've always placed this on the base.html template of my django projects:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="{% get_static_prefix %}js/lib/jquery.scrollTo-1.4.1-min.js"></script>
<script type="text/javascript" src=""{% get_static_prefix %}js/messages_flasher.js"></script>
The first line is the google jquery library, the second is a needed library which I downloaded from here, and the third is the script I found, which shows the messages sended in the request, in a stackoverflow.com kind of way.
I also created a messages.html template that looks like this:
<script type="text/javascript">
$(document).ready(function() {{% for msg in messages %}
show_site_message('{{msg}}');{% endfor %}
... and I added that to the base.html mentioned above, like this:
<div class="container" id="site_messages_container">
{% include "ui/fragments/messages.html" %}
... and this goes into the css file, you can make as many changes here as you want, after all is a css style:
#site_messages_container{
... and heres whats in the messages_flasher.js, which is what does most of the functionality I wanted for my messages:
var site_message_timeout;
function show_site_message(msg) {
clearTimeout(site_message_timeout);
$(document).scrollTo("#site_messages_container", 800, function() {
$("#site_messages").remove();
$("#site_messages_container").prepend("<div id='site_messages'><h3>"+msg+"</h3></p>");
$("#site_messages").slideDown("fast");
$("#site_messages").fadeIn("fast");
site_message_timeout = setTimeout(hide_site_message, 3000);
function hide_site_message() {
$("#site_messages").slideUp("fast");
$("#site_messages").fadeOut("fast", function() {
$("#site_messages").remove();
With all this in place just remember that django.contrib.messages must be in the installed_apps list, django.contrib.messages.middleware.MessageMiddleware must be set in your middleware_classes, and django.contrib.messages.context_processors.messages must be in your template_context_processors, in settings.py
Now with all this youll just have to import messages from django.contrib and then add a message to a request, whenever you feel like it.
For more information on the messages framework, take a look at the django documentation.
