表单提交后的Django bootstrap模式

时间:2014-12-15 09:52:02

标签: django twitter-bootstrap

我正在使用django,并且在jquery验证后提交了一个bootstrap3'联系'表单。这工作正常,我现在想重定向到一个bootstrap模式'谢谢'页面。我不确定如何在Django中这样做。在我的主页中,在我添加的表单下:

        <div class="row">
            <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6"
                <div class="clearfix"></div>
                <h2 class="section-heading">Registration form</h2>
                      {% block 'form' %}
                    {% endblock %}
            </div>
             <a data-toggle="modal" href="#thanksModal">thanksModal</a>
            {% include "thanks.html" %}
            <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                <img class="img-responsive" src="../static/img/dog.png" alt="" />
            </div>
        </div>

模态本身是:

<div class="modal hide" id="thanksModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
  </div>
  <div class="modal-body">
      <h1>Thank you</h1>

  </div>
  <div class="modal-footer">
       <input name="cancel" class="btn" type="submit" value="Cancel"/>
  </div>
</div>

在我看来,我有:

def contact(request):
  errors = []
  if request.method == 'POST'

    if not request.POST.get('subject', ''):
        errors.append('Enter a subject.')
    if not request.POST.get('message', ''):
        errors.append('Enter a message.')
    if request.POST.get('email') and '@' not in request.POST['email']:
        errors.append('Enter a valid e-mail address.')
    if not errors:
        send_mail(
            request.POST['subject'],
            request.POST['message'],
            request.POST.get('email', 'noreply@simplesite.com'),
            ['administrator@simplesite.com'], #email address where message is sent.
        )
        return HttpResponseRedirect('/thanks/')
return render(request, 'form.html',{'errors': errors})

def thanks(request):
    return render_to_response('thanks.html')

目前,我看到一个无法点击的链接在主页面上显示“谢谢”,并且在提交后,“联系”页面会发生重定向。我怎样才能使这个工作?

1 个答案:

答案 0 :(得分:1)

如果我理解正确,在提交联系表单后,您需要一个模态显示谢谢。

而不是:

return HttpResponseRedirect('/thanks/')

执行:

import json
...
return HttpResponse(json.dumps({"success":True}), content_type="application/json")

在提交表单的JS中,在重新加载HTML表单之前检查响应是否成功:

if (typeof jqXhr.success != 'undefined') {
    $('#success-modal').modal('show');
} else {
    $('#my-form').html(jqXhr);
}