Django - How to show messages under ajax function

You just create your messages as always and before sending the response you put them into a list of dicts:

django_messages = []

for message in messages.get_messages(request):
    django_messages.append({
        "level": message.level,
        "message": message.message,
        "extra_tags": message.tags,
})

Then you add any data and your messages and serialize it, e.g.:

data = {}
data['success'] = success
data['messages'] = django_messages

return HttpResponse(simplejson.dumps(data), content_type="application/json")

Finally at your ajax:

success: function(data){
    success = data.success;
    update_messages(data.messages);
    if (success){
        ...                                                                             
    }
},

And the update_messages function:

function update_messages(messages){
    $("#div_messages").html("");
    $.each(messages, function (i, m) {
        $("#div_messages").append("<div class='alert alert-"+m.level+"''>"+m.message+"</div>");
    }); 
}

It works perfectly and I found it very easily to implement.

Edit: There was a suggestion to change the last piece of code in order to use a mapping for the levels. This does not apply to version this answer was written for, since level was actually a string. In version 4.0 it is now a number, see docs here. This would be the new snippet. Thanks for the suggestion @codingfactory1:

function update_messages(messages){
    const levels = {20: 'info', 25: 'success', 30: 'warning', 40: 'error'}
    $("#div_messages").html("");
    $.each(messages, function (i, m) {
        $("#div_messages").append("<div class='alert alert-"+levels[m.level]+"''>"+m.message+"</div>");
    });
    
}

These are the tools/methods that helped me to solve the problem. First, I have a helper utility method called render_to_json:

# `data` is a python dictionary
def render_to_json(request, data):
    return HttpResponse(
        json.dumps(data, ensure_ascii=False),
        mimetype=request.is_ajax() and "application/json" or "text/html"
    )

I have a messages.html template to render the necessary html for the popup message(s):

{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}

When create a message in response to an AJAX request, I use Django's render_to_string to package the message(s) into a string that gets stored in a data dictionary, which then uses my render_to_json to return an appropriate response:

def my_custom_view(request)
    # ...  your view code
    data = {
        'msg': render_to_string('messages.html', {}, RequestContext(request)),
    }
    return render_to_json(request, data)

Then, in my jQuery $.post(...) callback function, I check to see if the response object has a msg attribute, and then insert the contents of response.msg into the DOM where I want it needs to be, with jQuery transitions if desired. My base.html template contains the <ul> container for the messages:

<ul id="popup-messages-content">
    {% include 'messages.html' %}
</ul>

Note that the above includes the messages.html for the case when you want to display messages on an actual page load (non-AJAX request) - it is blank if there are no messages, but the <ul> is still available to push AJAX-received messages into.

The last piece is the Javascript function (requires jQuery) I use in any $.post(...) callbacks to show the messages:

function showPopupMessage(content) {
    var elMessages = $('#popup-messages-content');
    if (elMessages.length && content) {
        elMessages.html(content);
    }
}

Here's a simple idea.

Add a placeholder for your messages in layout.html, this allows appending new messages in javascript:

<div id="messages">
{% for message in messages %}
    <div id="notice" align="center">
        {{ message }}
    </div>
{% endfor %}
</div>

Instead of:

{% for message in messages %}
    <div id="notice" align="center">
        {{ message }}
    </div>
{% endfor %}

In add.html, add another one like:

{% if messages %}
<ul class="hidden-messages" style="display:none">
    {% for message in messages %}
        <div id="notice" align="center">
            {{ message }}
        </div>
    {% endfor %}
</ul>
{% endif %}

And ajaxForm would look like:

$('#your_form_id').ajaxForm({
    success: function(responseText) {
        var newMessages = $(responseText).find('.hidden-messages').html();
        $('#messages').append(newMessages);
    },
});