モーダル＆ハンドリングエラー内でのModelFormのレンダリング

Question

私は、テンプレートをレンダリングすることによってGETリクエストに応答するビューitem_list_viewを持っています。mainlist.html。そのテンプレートは、それらの項目を編集するためのリンクと一緒に項目のリストをレンダリング：

#mainlist.html 
{% for item in items %} 
    <a class='edit-link' href='#' data-form="{% url items:itemform %}?i={{item.id}}"> 
     Edit 
    </a> 
{% endfor %} 

<!-- later in mainlist.html --> 
<div class='modal fade' tabindex="-1" role="dialog" id='itemFormModal' style='display:none;'> 
</div> 

編集リンクをクリックすると、モーダルは、対応するdata-form属性を使用してコンテンツがロードされ、その後、モーダルが示されている：

$(".edit-link").click(function(ev){ 
    ev.preventDefault(); 
    var url = $(this).data("form"); 
    $("#itemFormModal").load(url, function() { 
     $(this).modal('show'); 
    }); 
    return false; //prevent click propogation 
}); 

この時点で、モーダルは適切なModelFormで表示され、そのフォームはクラスitem-formを持ちます。私たちは、AJAXを経由してフォームを送信：

$(".item-form").on('submit', function() { 
    $.ajax({ 
     type: $(this).attr('method'), 
     url: this.action, 
     data: $(this).serialize(), 
     context: this, 
     success: function(data, status) { 
      $('#itemFormModal').html(data); 
     } 
    }); 
    return false; 
}); 

フォームが有効なデータで提出される場合、これは正常に動作します。フォームの送信が成功すると、ユーザーは成功メッセージとともにリストビューにリダイレクトされます。

フォームにエラーがある場合は、元のモーダルのエラーでフォームを再レンダリングしたいと思います。しかし、現時点でエラーが発生したフォームを送信すると、ブラウザはフォームがエラーでレンダリングされたアクションURLに直接行きます。

どのように私のModelFormをエラーでリダイレクトするのではなく、このモーダルに再ロードできますか？

---

編集：編集リンクは、このビューをクリックすると：

def litem_create_edit_view(request): 
    #Displays a ModelForm for an Item object 
    #if an "instance" is passed via the url, that 
    #instance is loaded into the ModelForm for editing 
    instance_id = request.GET.get('instance', None) 
    if instance_id is not None: 
     instance = Item.objects.get(id=instance_id) 
    else: 
     instance = None 

    if request.method == 'POST': 
     form = ItemForm(request.POST, instance=instance) 
     if form.is_valid(): 
      newitem = form.save() 
      messages.add_message(request, messages.SUCCESS, "Item saved!") 
      return redirect("items:mainlist") 

    else: 
     form = LeadForm(instance=instance) 

    return render(request, "leads/leadform.html", {'form':form, 'instance':instance}) 

は、モーダルの内側に、このテンプレートをレンダリングします：ビューの使用では

<div class='modal-dialog modal-lg'> 
    <div class='modal-content'> 
    {% if instance %} 
    <form method="post" class='lead-form' action="{% url 'leads:leadform' %}?instance={{instance.id}}"> 
    {% else %} 
    <form method="post" class='lead-form' action="{% url 'leads:leadform' %}"> 
    {% endif %} 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
     {% if instance %} 
     <h3>Editing Item</h3> 
     {% else %} 
     <h3>Add Item</h3> 
     {% endif %} 
     </div> 
     <div class="modal-body"> 
      {% csrf_token %} 
      {{ form|crispy }} 
     </div> 
     <div class="modal-footer"> 
      <button type='submit' class='btn btn-primary'>Save</button> 
      <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> 
     </div> 
    </form> 
    </div> 
</div> 

Answer 1

のようなもの：

foos = Foo.objects.all() # or any other model data you want to return 
data = serializers.serialize('json', foos) # serialize it 

JSONを返します。ないテンプレート：

return HttpResponse(data, content_type='application/json') 

ですから、リダイレクトされることなく、同じdiv要素内にとどまるこの方法は、単にデータ が消費およびレンダリングされます。