Twitter-Bootstrap模式和django形式

时间:2012-09-29 02:51:39

标签: django jquery twitter-bootstrap django-forms django-views

我想在django表单提交后在Twitter-Bootstrap模式中显示last_item,但是我不知道如何处理模态。我尝试了documentation中建议的表单按钮,但它不处理表单数据。我该怎么办?

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

1 个答案:

答案 0 :(得分:1)

seems就像点击引导调用event.preventDefault()一样,这会阻止表单被提交。

您应该bind your own event点击此按钮和close the modal programaticaly

它可能看起来像:

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

我没有测试这段代码,但它应该是一个好的开始。