Question

我有包含表单的Bootstrap Modal。验证表单失败时重定向到原始表单页面。问题是如何让我的服务器在我的bootstrap模式中向我发送错误响应？

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>

Answer 1

这可能看起来像黑客但你可以手动启动模式，如果表单上有错误，比如

<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 %}

或类似的东西。

希望这有帮助

Answer 2

当你提交时，正常的表单提交正在发生，而你可以使用ajax发布，这是一个例子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;
})

django bootstrap模式表单重定向验证失败

2 个答案: