有人在四月询问确切的
same question,没有任何答案。但由于他提供的信息太少;问题被放弃了。
我有同样的问题。在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”> ;.
但是如何从视图中打开模态?
解决方法
除非你需要使用模态外的联系表单,这应该为你工作。如果你确实需要在其他地方使用它,保持两个版本(一个模态,一个不)。此外,一个提示 – 给
django-crispy-forms一个lookover – 它帮助你使用twitter-bootstrap类来呈现表单。
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版本,并按需加载每个窗体。我假设在表单提交,整个页面将重新加载。如果你想异步地提交表单,在别的地方有答案。
我们将从重新定义contact.html片段开始。它应该渲染在一个模态,并包含所有的标记必要的,以良好的模态。您原来的联系人视图是正常的 – 除非如果表单无效,您将最终呈现的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>
这是所有未经测试,但它应该给你一个好地方开始/迭代。