Django - Cách hiển thị tin nhắn theo chức năng ajax

Question

Tôi đang sử dụng plugin AjaxForm để gửi biểu mẫu của tôi mà không cần làm mới. như:

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

     //something on success or fail 
    }); 

hoạt động chính xác. khi tôi nhấp vào nút gửi nó lưu biểu mẫu dữ liệu mà không cần làm mới. Nhưng trước đó; tôi đã có các tin nhắn django trên tệp mẫu của tôi như:

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

những gì mã này hiển thị thông báo nếu bài đăng được lưu chính xác hoặc thất bại.

ngay bây giờ; tôi không thể làm điều đó. tôi không hiểu làm thế nào tôi có thể sử dụng các thẻ tin nhắn với chức năng ajax.

nó chỉ lưu bài đăng. không có thông báo.

cảm ơn bạn.

chỉnh sửa:

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

liên quan xem:

@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

Đây là những công cụ/phương pháp giúp tôi giải quyết vấn đề. Trước tiên, tôi có một phương pháp hữu ích helper gọi 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" 
    ) 

Tôi có một mẫu messages.html để render html cần thiết cho việc thông báo popup (s):

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

Khi soạn tin nhắn để đáp ứng với một yêu cầu AJAX, tôi sử dụng số render_to_string của Django để gói (các) thư vào một chuỗi được lưu trữ trong từ điển data, sau đó sử dụng số render_to_json của tôi để trả về phản hồi thích hợp:

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

Sau đó, trong hàm callback jQuery $.post(...) của tôi, tôi kiểm tra xem nếu đối tượng response có một thuộc tính msg, và sau đó chèn các nội dung của response.msg vào DOM nơi tôi muốn nó cần phải được, với các chuyển động jQuery nếu muốn.base.html mẫu của tôi chứa <ul> container cho các thông điệp:

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

Lưu ý rằng ở trên bao gồm các messages.html đối với trường hợp khi bạn muốn hiển thị tin nhắn trong một tải trang thực tế (không AJAX yêu cầu) - đó là trống nếu không có tin nhắn, nhưng <ul> vẫn có sẵn để đẩy tin nhắn đã nhận AJAX vào.

Phần cuối cùng là chức năng Javascript (yêu cầu jQuery) tôi sử dụng trong bất kỳ $.post(...) callbacks để hiển thị các thông điệp:

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

Answer 2

Dưới đây là một ý tưởng đơn giản.

Thêm một giữ chỗ cho tin nhắn của bạn trong layout.html, điều này cho phép phụ thêm thư mới trong javascript:

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

Thay vì:

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

Trong add.html, thêm nhau như:

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

Và ajaxForm sẽ xem xét như:

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

Answer 3

Tôi tìm thấy một cách dễ dàng hơn để làm việc đó here, tôi mất một số những ý tưởng và này là kết quả của tôi:

bạn chỉ cần tạo các thông điệp của bạn như mọi khi và trước khi gửi câu trả lời bạn đặt chúng vào một danh sách các dicts:

django_messages = [] 

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

Sau đó, bạn thêm bất kỳ dữ liệu và tin nhắn của bạn và serialize nó, ví dụ:

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

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

Cuối cùng tại ajax của bạn:

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

Và update_messages chức năng:

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

}

Nó hoạt động hoàn hảo và tôi thấy nó rất dễ dàng để thực hiện