Django bootstrap modal after form submission - django

Question

I am working with django and have a bootstrap3 'contact' form that I submit after jquery validation. This is working correctly and I now want to redirect to a bootstrap modal 'thank you' page. I'm not exactly sure how to do this in Django. In my main page, under the form I've added:
<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>
The modal itself is:
<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>
In my view I have:
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')
As it is currently, I see an unclickable link that says 'thank you' on the main page and upon submission a redirection occurs to the 'contact' page. How can I get this working?

Answer 1

If I understand correctly, after the contact form is submitted you want a modal to appear saying thanks.
Instead of:
return HttpResponseRedirect('/thanks/')
Do:
import json
...
return HttpResponse(json.dumps({"success":True}), content_type="application/json")
And in your JS that submits the form check the response for success before reloading the HTML form:
if (typeof jqXhr.success != 'undefined') {
$('#success-modal').modal('show');
} else {
$('#my-form').html(jqXhr);
}