Django - ajax関数でメッセージを表示する方法

Question

AjaxFormプラグインを使用して、リフレッシュせずにフォームを送信しています。 like：

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

     //something on success or fail 
    }); 

これは正しく機能します。送信ボタンをクリックすると、リフレッシュせずにフォームデータを保存します。しかしこれの前に。ポストが正しく保存されたり、何かが失敗した場合に通知を表示しているものを、このコードはありません

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

：私は私のようなテンプレートファイルにDjangoのメッセージを持っていました。

now;私はそれをすることはできません。私はどのように私はこれらのメッセージタグをajax関数で使用できるか分かりません。

投稿を保存するだけです。通知はありません。

ありがとうございました。

編集：

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

関連ビュー：

@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

これらは私が問題を解決するのに役立つツール/方法です。に応じてメッセージを作成するとき

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

：私はポップアップメッセージ（複数可）に必要なHTMLをレンダリングするmessages.htmlテンプレートを持っている

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

：まず、私はrender_to_jsonと呼ばれるヘルパーユーティリティメソッドを持っていますAJAXリクエストでは、Djangoのrender_to_stringを使用してdata辞書に格納された文字列にメッセージをパッケージ化してから、render_to_jsonを使用して適切な応答を返します。

その後、私のjQuery $.post(...)コールバック関数の中で、私はresponseオブジェクトがmsg属性を持っているかどうかを確認し、私はそれが必要な場合はjQueryの遷移と、する必要がありますしたいDOMにresponse.msgの内容を挿入します。 - それは場合は空白になって上記のあなたは、実際のページのロード（非AJAX要求）にメッセージを表示したい場合のためにmessages.html含まれていることを

が

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

注：私のbase.htmlテンプレートは、メッセージのための<ul>コンテナが含まれていますメッセージはありませんが、<ul>はまだAJAXで受信したメッセージをプッシュすることができます。

最後のピースは（jQueryのが必要です）、私はメッセージを表示するために、任意の$.post(...)コールバックで使用Javascriptの機能である：

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

Answer 2

ここでは簡単なアイデアです。

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

の代わりに：：

、これはJavaScriptで新しいメッセージを追加することができますlayout.htmlであなたのメッセージのためのプレースホルダを追加追加add.htmlで

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

、別の1 like：

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

そして、ajaxFormはlike：

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

Answer 3

私は、hereそれを行うための簡単な方法を発見した私は、これらのアイデアのいくつかを取り、あなたはただいつものように、あなたがdictsのリストに入れて応答を送信する前にあなたのメッセージを作成

：これは私の結果であった

django_messages = [] 

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

そして、あなたは、任意のデータとあなたのメッセージを追加し、それをシリアル化、例えば：

あなたのアヤックスでの最後

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

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

：

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

そしてupdate_messages機能：

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

}

これは完璧に動作し、実装が非常に簡単だとわかりました