CODEWITHSUNDEEP
djangojquerytwitter-bootstrapdjango-formsdjango-views
msampaio
msampaio

Reputation: 3443

Twitter-Bootstrap modal and django form

I'd like to show last_item in a Twitter-Bootstrap modal after django form submission, however I don't know how to handle the modal. I tried the form button suggested in documentation, but it doesn't process the form data. What do I have to do?

<button data-toggle="modal" data-target="#myModal2">Submit</button>

views.py

def main(request):
    if request.method == 'POST':
        form = MyModelForm(request.POST)
        if form.is_valid():
            name = form.cleaned_data['name']
            request.session['name'] = name
            mm = MyModel.objects.create(name=name)
            mm.save()
            return HttpResponseRedirect('/') # Redirect after POST
    else:
        form = MyModelForm()
    args = {}
    args['last_item'] = MyModel.objects.all().order_by('pk').reverse()[0]
    args['form'] = form
    return render(request, 'form.html', args)

form.html

{% extends "base.html" %}
{% block content %}

<form method="POST" id="" action="">
  {% csrf_token %}
  {{ form.as_p }}
  <button>Submit</button>
</form>

<div class="modal" id="myModal2" tabindex="-1" role="dialog"
     aria-labelledby="myModal2Label" aria-hidden="true" style="display: none">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModal2Label">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>Last item: {{ last_item }}</p>
  </div>
</div>
{% endblock %}

{% block scripts %}
{% endblock %}

Upvotes: 1

Views: 2171

Answers (1)

jpic
jpic

Reputation: 33420

It seems like bootstrap calls event.preventDefault() on click, which prevents the form from being submited.

You should bind your own event on this button and close the modal programaticaly.

It could look like:

$('form').submit(function() {
    $('#myModal2').modal('hide');
})

I did not test this code but it should be a good start.

Upvotes: 1

Related Questions