Django - 如何在ajax函數下顯示消息

Question

我使用AjaxForm插件來提交我的表單而不刷新。如：

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

     //something on success or fail 
    }); 

這個工作正常。當我點擊提交按鈕時，它會保存表單數據而不刷新。但在此之前;我有Django的消息對我的喜歡的模板文件：

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

這個代碼是什麼顯示的通知後，如果正確保存什麼失敗。

now;我不能那樣做。我不明白我可以如何使用這些消息標籤與AJAX功能。

它只是保存帖子。沒有通知。

謝謝。

編輯：

add_post網址：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

這些是幫助我解決問題的工具/方法。首先，我有一個輔助工具方法稱爲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" 
    ) 

我有一個messages.html模板來呈現的彈出消息（S）所需的HTML：

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

當響應創建消息一個AJAX請求，我使用Django的render_to_string將郵件打包成一個字符串，該字符串存儲在data字典中，然後使用我的render_to_json返回適當的響應：

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

然後，在我的jQuery $.post(...)回調函數，我檢查，看看是否response對象具有msg屬性，然後插入的response.msg內容爲，我想它需要，如果需要的是，使用jQuery過渡的DOM。我base.html模板包含消息的<ul>容器：

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

注意上面包括messages.html當你想顯示在一個實際的頁面加載（非AJAX請求）消息的情況下 - 這是空白，如果沒有消息，但<ul>仍然可以將AJAX收到的消息放入。

的最後一塊是JavaScript函數（需要jQuery的）我在任何$.post(...)回調用來顯示信息：

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

Answer 2

這裏有一個簡單的想法。

添加一個佔位符中的layout.html您的郵件，這使得在JavaScript中追加新的消息：

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

相反的：

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

在add.html，添加另一個像：

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

和ajaxForm會看起來如：

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

Answer 3

我發現這樣做here更簡單的方法，我把其中的一些想法和這是我的結果：

你剛纔創建的消息一如既往的和發送你把他們的反應到類型的字典列表前：

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

最後，在你的Ajax：

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>"); 
      }); 

}

它完美的工作，我發現很容易實現