2016-08-24 22 views
0

フォームを含むブートストラップモーダルを持っています。検証フォームが失敗した場合、元のフォームページにリダイレクトされます。質問は、私のブートストラップモーダルで、そのサーバが私にエラーを返すようにする方法です。djangoブートストラップモーダルフォーム検証時にリダイレクトに失敗しました

urls.py

url(r'^add/$', CreateCarView.as_view(), name='add_auto'), 

views.py

class CreateCarView(CreateView): 
model = Car 
template_name = 'automobiles/automobiles_add.html' 
fields = '__all__' 

def get_success_url(self): 
    messages.success(self.request, 'Авто успішно додано') 
    return reverse('home') 

def post(self, request, *args, **kwargs): 
    if request.POST.get('cancel_button'): 
     messages.info(self.request, 'Додавання відмінено') 
     return HttpResponseRedirect(reverse('home')) 
    else: 
     return super(CreateCarView, self).post(request, *args, **kwargs) 

base.html

<div class="row"> 
    <div class="col-xs-4"> 
     <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal" 
       data-remote="{% url 'add_auto' %}"> 
      Open Modal 
     </button> 
     <div id="myModal" class="modal fade" role="dialog"> 
      <div class="modal-dialog modal-sm"> 
       <!-- Modal content--> 
       <div class="modal-content"> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

automobiles_add.html

<form id="add_item" class="form" role="form" action="{% url 'add_auto' %}" method="post"> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title">Додати авто</h4> 
</div> 
<div class="modal-body"> 
    {% csrf_token %} 
    {{ form.as_p }} 
</div> 
<div class="modal-footer"> 
    <input class="btn btn-success" type="submit" value="Додати тачку" name="add_button"> 
    <input class="btn btn-danger" type="submit" value="Відмінити" name="cancel_button"> 
</div> 

+1

このフォームの送信には、ajaxを使用することをおすすめします。しかし、それはより多くのコードを必要とするでしょう。または、ドキュメントに記載されているようにdjangoフォームエラーをモーダルに挿入し、JSからフェッチしてページロード時にモーダルを開くためのURLパラメータをリダイレクトすることができます。 – user3599803

答えて

2

これはハックのように見えるかもしれませんが、フォーム上のエラー、そのような

<form id="add_item" class="form" role="form" action="{% url 'add_auto' %}" method="post"> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h4 class="modal-title">Додати авто</h4> 
</div> 
<div class="modal-body"> 
    {% csrf_token %} 
    {{ form.as_p }} 
</div> 
<div class="modal-footer"> 
    <input class="btn btn-success" type="submit" value="Додати тачку" name="add_button"> 
    <input class="btn btn-danger" type="submit" value="Відмінити" name="cancel_button"> 
</div> 

{% if form.errors %} 
    <script> 
    $(function() { 
     $('#myModal').modal({show: true}); 
    }); 
    </script> 
{% endif %} 

か何かのようなものがある場合は、手動でモーダルを起動することができます。

希望これは代わりに、あなたは、AJAXを使用して投稿することができ、

0

あなたが提出された場合、通常のフォームの提出が起こっているのに役立ちます、これは例のAjaxコードです。

$(document).on('submit', '#add_item', function() { 
    $.ajax({ 
     type: $(this).attr('method'), 
     url: this.action, 
     data: $(this).serialize(), 
     context: this, 
     success: function(data, status) { 
      location.reload(); 
     }, 
     error: function (request, type, errorThrown) { 
      $('#add_item').html(request.responseText); 
     } 
    }); 
    return false; 
}) 
関連する問題