Django - So zeigen Sie Nachrichten unter AJAX-Funktion

Question

Ich verwende AjaxForm-Plugin, um mein Formular ohne Aktualisierung zu übermitteln. wie:

$('#my_form_id').ajaxForm(function(){ 

     //something on success or fail 
    }); 

das funktioniert richtig. Wenn ich auf "Senden" -Button klicke, werden die Formulardaten ohne Aktualisierung gespeichert. Aber davor; Ich hatte django Nachrichten auf meinem Template-Datei wie:

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

, was der Code-Benachrichtigungen anzeigt, wenn Post richtig oder etwas fehlgeschlagen gespeichert.

jetzt; Ich kann das nicht tun. Ich verstehe nicht, wie ich diese Nachrichten-Tags mit Ajax-Funktionen verwenden kann.

es speichert nur die Post. keine Benachrichtigungen.

danke.

edit:

add_post url: url(r'^admin/post/add/$', view='add_post',name='add_post'),

ähnliche Ansicht:

@login_required(login_url='/login/') 
def add_post(request): 
    template_name = 'add.html' 
    owner = request.user 
    if request.method == "POST": 
     form = addForm(request.POST) 
     if form.is_valid(): 
      titleform = form.cleaned_data['title'] 
      bodyform = form.cleaned_data['body'] 
      checkform = form.cleaned_data['isdraft'] 

      n = Post(title=titleform, body=bodyform, isdraft=checkform, owner=owner) 
      n.save() 
      messages.add_message(request, messages.SUCCESS, 
       'New post created successfully!') 
     else: 
      messages.add_message(request, messages.WARNING, 
       'Please fill in all fields!') 
    else: 
     form = addForm() 
    return render_to_response(template_name, {'form': form, 'owner': owner,}, 
     context_instance=RequestContext(request)) 

Answer 1

Dies sind die Tools/Methoden, die mir geholfen haben, das Problem zu lösen. Zuerst habe ich ein Hilfsprogramm Methode render_to_json genannt:

# `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" 
    ) 

Ich habe eine messages.html Vorlage die notwendige HTML-Code für die Popup-Nachricht (en) zu machen:

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

Wenn erstellen Sie eine Nachricht als Antwort auf ein AJAX-Request, verwende ich Djangos render_to_string die Nachricht zu verpacken (s) in eine Zeichenfolge, die in einem data Wörterbuch gespeichert werden, die dann meine render_to_json verwendet eine angemessene Antwort auf dem Rück:

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

Dann in meiner jQuery $.post(...) Callback-Funktion, überprüfe ich, ob das response Objekt ein msg Attribut hat, und dann den Inhalt von response.msg in das DOM einfügen, wo ich es muß sein will, mit Übergängen jQuery, falls gewünscht.Meine base.html Vorlage enthält die <ul> Behälter für die Nachrichten:

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

Beachten Sie, dass die über die messages.html für den Fall enthalten, wenn Sie Nachrichten auf einer tatsächlichen Seite zu laden (nicht-AJAX-Request) angezeigt werden sollen - es leer ist, wenn Es gibt keine Nachrichten, aber die <ul> ist immer noch verfügbar, um AJAX-Nachrichten zu senden.

Das letzte Stück der Javascript-Funktion (erfordert jQuery) ich in irgendwelchen $.post(...) Rückrufe die Meldungen zeigen:

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

Answer 2

Hier ist eine einfache Idee.

einen Platzhalter für Ihre Nachrichten in layout.html hinzufügen, dies ermöglicht es neue Nachrichten in Javascript anhängt:

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

Statt:

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

In add.html, fügen eine andere wie:

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

Und AjaxForm würde aussehen wie:

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

Answer 3

ich einen einfacheren Weg, es zu tun here fand, nahm ich einige dieser Ideen und das war mein Ergebnis:

Sie erstellen einfach Ihre Nachrichten wie immer und vor der Antwort Senden Sie sie in eine Liste von dicts setzen:

django_messages = [] 

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

Dann fügen Sie alle Daten und Ihre Nachrichten und serialisiert sie, zum Beispiel:

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

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

schließlich an Ihrem Ajax:

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

Und die update_messages Funktion:

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

}

Es funktioniert perfekt und ich fand es sehr einfach zu implementieren