如何在twitter-bootstrap模式窗口中插入一个Django表单？
四月份有人问完全相同的问题 ，没有任何答案。 但是由于他提供的信息太less， 这个问题被放弃了。
我有同样的问题。 在main_page.html我有这一行：
<a href="/contact/edit/{{ item.id }}" title="Edit">edit</a>
一旦你点击了，编辑模板就会出现在twitter引导模式中。
url.py
(r'^contact/edit/(?P<contact_id>\d+)/$', contact_view),
view.py
def contact_view(request, contact_id=None): profile = request.user.get_profile() if contact_id is None: contact = Contact(company=profile.company) template_title = _(u'Add Contact') else: contact = get_object_or_404(profile.company.contact_set.all(), pk=contact_id) template_title = _(u'Edit Contact') if request.POST: if request.POST.get('cancel', None): return HttpResponseRedirect('/') form = ContactsForm(profile.company, request.POST, instance=contact) if form.is_valid(): contact = form.save() return HttpResponseRedirect('/') else: form = ContactsForm(instance=contact, company=profile.company) variables = RequestContext(request, {'form':form, 'template_title': template_title}) return render_to_response("contact.html", variables)
这通常是contact.html的样子：
<form class="well" method="post" action="."> {% csrf_token %} {{form.as_p}} <input class="btn btn-primary" type="submit" value="Save" /> <input name="cancel" class="btn" type="submit" value="Cancel"/> </form>
我可以把它放在<div class="modal-body"> 。 但是，如何从视图中打开模式？
除非你需要使用模态外的联系表格，否则这个function应该适用于你。 如果你确实需要在其他地方使用它，保持两个版本（一个模式，一个不）。 此外，一个提示 – 给Djjango 脆 – 形成了一个lookover – 它可以帮助您呈现与twitter-bootstrap类的forms。
contact.html：
<div class="modal hide" id="contactModal"> <form class="well" method="post" action="/contact/edit/{{ item.id }}"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3>Editing Contact</h3> </div> <div class="modal-body"> {% csrf_token %} {{form.as_p}} </div> <div class="modal-footer"> <input class="btn btn-primary" type="submit" value="Save" /> <input name="cancel" class="btn" type="submit" value="Cancel"/> </div> </form> </div>
main_page.html
<html> ... <a data-toggle="modal" href="#contactModal">Edit Contact</a> {% include "contact.html" %} ... </html>
编辑：
好吧，现在我知道你可能有多个表单，把每个表单隐藏在html中可能是一个坏主意。 您可能想要转到ajax-y版本，并按需加载每个表单。 我在这里假设，在表单提交，整个页面将重新加载。 如果你想asynchronous提交表单，其他地方有答案 。
我们将从重新定义contact.html片段开始。 它应该在一个模态内进行渲染，并且包含所有必要的标记，以便与模态相配合。 你原来的contact视图是好的 – 除非如果表单无效 ，你最终将呈现contact.html而不是别的。
<form class="well contact-form" method="post" action="/contact/edit/{{ item.id }}"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3>Editing Contact</h3> </div> <div class="modal-body"> {% csrf_token %} {{form.as_p}} <!-- {{form|crispy}} if you use django-crispy-forms --> </div> <div class="modal-footer"> <input class="btn btn-primary" type="submit" value="Save" /> <input name="cancel" class="btn" type="submit" value="Cancel"/> </div> </form>
现在，您的main_page.html ：
<html> .. snip .. <a class="contact" href="#" data-form="/contact/edit/{{ item.id }}" title="Edit">edit</a> <a class="contact" href="#" data-form="/contact/edit/{{ item.id }}" title="Edit">edit</a> <a class="contact" href="#" data-form="/contact/edit/{{ item.id }}" title="Edit">edit</a> <div class="modal hide" id="contactModal"> </div> <script> $(".contact").click(function(ev) { // for each edit contact url ev.preventDefault(); // prevent navigation var url = $(this).data("form"); // get the contact form url $("#contactModal").load(url, function() { // load the url into the modal $(this).modal('show'); // display the modal on url load }); return false; // prevent the click propagation }); $('.contact-form').live('submit', function() { $.ajax({ type: $(this).attr('method'), url: this.action, data: $(this).serialize(), context: this, success: function(data, status) { $('#contactModal').html(data); } }); return false; }); </script> .. snip .. </html>
这一切都没有经过testing，但它应该给你一个很好的开始/迭代的地方。
当我遇到这个post时，我遇到了同样的问题。 我尝试了这个解决scheme，但是它并不是真的为我工作（但它给了我方向）。 我提出了一个解决scheme，但我觉得这很好，我希望得到一些关于如何更好地实现它的指导。
问题是一样的：在twitter boostrap模式和Django窗体中显示一个窗体（使用Django的通用窗体视图编辑/添加模型）
所以我做了什么：
main.html中
<script type="text/javascript"> function genericLoadDialog(form_selector, dialog_selector, matchString){ $.ajax({ url: $(form_selector).attr('action'), type: 'POST', data: $(form_selector).serialize(), success: function(data, textStatus, jqXHR){ if(data.match(matchString)){ // We got errors in form $(dialog_selector).html(data).modal('show'); return false; } $(dialog_selector).modal('hide'); }, }) } </script> <body> <div class="modal hide" id="{{ editor_dialog_id }}"></div> <a data-toggle="modal" href="#{{ editor_dialog_id }}" onclick="$('#{{ editor_dialog_id }}').load('/create/form');">Title</a> <body>
editor.html
<form id="{{ editor_form_id }}" action="{{ submit_url }}" method="POST"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3>Modal header</h3> </div> <div class="modal-body" id="editor-dialog-body"> {% if not form.is_valid %} <div class='hide'>invalid_form</div> {% endif %} {% csrf_token %} {{ form.as_p }} </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Cancel</a> <a href="#" data-toggle="modal" class="btn btn-primary" onclick="genericLoadDialog('#{{ editor_form_id }}', '#{{ editor_dialog_id }}', null, 'invalid_form');">Save</a> </div> </form>
所以stream程是这样的：
- 点击标签从创build表单url加载到模态div中
- 点击模态（submit）中的保存button，触发genericLoadDialog函数。 此加载使用从表单收集的数据向创build表单url发出POST请求
- 如果表单无效，则重新加载模态html并显示错误字段，否则closures模式，django应该保存/redirect（我在django表单视图中使用get_success_url方法，但由于某种原因，我不工作，它保存对象）
我很不舒服的方式，我检查的forms是否有效genericLoadDialog，如果有人有一个更好的主意是好的。
