如何在twitter-bootstrap模态窗口中插入django表单？ [英] How do I insert a django form in twitter-bootstrap modal window?

问题描述

有人询问确切的同样的问题，在四月，没有任何答案。但由于他提供的信息太少;这个问题被放弃了。

我有同样的问题。在 main_page.html 中，我有这一行：

 < a href =/ contact / edit / {{item.id}}title =Edit> edit< / a> 
  

一旦你点击那里，编辑模板将出现在一个twitter引导模式中。

url.py

 （r'^ contact /编辑/（？P< contact_id> \d +）/ $'，contact_view），
  

view.py

  def contact_view（request，contact_id = None）：
 profile = request。 user.get_profile（）
如果contact_id为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'）
如果request.POST：
如果请求。 POST.get（'cancel'，None）：
 return HttpResponseRedirect（'/'）
 form = ContactsForm（profile.company，request.POST，instance = contact）
如果form.is_valid （）：
 contact = form.save（）
 return HttpResponseRedirect（'/'）
 else：
 form = ContactsForm（instance = contact，company = profile.company）
 variables = RequestContext请求，{'form'：form，'template_title'：template_title}）
返回render_to_response（contact.html，变量）
  

这通常是 contact.html 如下所示：

 < form class =wellmethod =postaction =。> 
 {％csrf_token％} 
 {{form.as_p}} 
< input class =btn btn-primarytype =submitvalue =保存/> 
< input name =cancelclass =btntype =submitvalue =取消/> 
< / form> 
  

我可以把它放在一个< div class =modal-body > 。
但是如何从视图中打开模态？

解决方案

除非您需要使用模态以外的联系表单，否则这应该适用于您。如果您确实需要在其他地方使用它，请维护两个版本（一个模式，一个不是）。此外，一个提示 - 给 django-crispy-forms 一个查找 - 它可以帮助您使用twitter-bootstrap呈现表单

contact.html：

 < div class = modal hideid =contactModal> 
< form class =wellmethod =postaction =/ contact / edit / {{item.id}}> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modal>×< / button> 
< h3>编辑联系人< / h3> 
< / div> 
< div class =modal-body> 
 {％csrf_token％} 
 {{form.as_p}} 
< / div> 
< div class =modal-footer> 
< input class =btn btn-primarytype =submitvalue =保存/> 
< input name =cancelclass =btntype =submitvalue =取消/> 
< / div> 
< / form> 
< / div> 
  

main_page.html

 < HTML> 
 ... 
 
< a data-toggle =modalhref =＃contactModal>编辑联系人< / a> 
 
 {％includecontact.html％} 
 
 ... 
< / html> 
  

编辑：

好吧，所以现在我知道你有可能有多种形式，这可能是一个坏主意，将每个表单隐藏在html中。您可能想要去ajax-y版本，并按需加载每个表单。 我假设在表单上提交，整个页面将重新加载。如果你想异步地提交表单，其他地方都有答案。

我们将首先重新定义联系人。 html 片段。它应该在一个模态中呈现，并包含所有必要的标记，以与模态一起玩好。您最初的联系人视图很好 - 除了表单为无效之外，您将最终呈现 contact.html ，没有别的。

 < form class =well contact-form method =postaction =/ contact / edit / {{item.id}}> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modal>×< / button> 
< h3>编辑联系人< / h3> 
< / div> 
< div class =modal-body> 
 {％csrf_token％} 
 {{form.as_p}}<！ -  {{form | crispy}}如果你使用django-crispy-forms  - > 
< / div> 
< div class =modal-footer> 
< input class =btn btn-primarytype =submitvalue =保存/> 
< input name =cancelclass =btntype =submitvalue =取消/> 
< / div> 
< / form> 
  

现在，您的 main_page.html

 < html> 
 .. snip .. 
 
< a class =contacthref =＃data-form =/ contact / edit / {{item.id}}title = 编辑 >编辑< / A> 
< a class =contacthref =＃data-form =/ contact / edit / {{item.id}}title =Edit> edit< / a& 
< a class =contacthref =＃data-form =/ contact / edit / {{item.id}}title =Edit> edit< / a& 
 
< div class =modal hideid =contactModal> 
< / div> 
 
< script> 
 $（。contact）。click（function（ev）{//为每个编辑联系人url 
 ev.preventDefault（）; //阻止导航
 var url = $（this ）.data（form）; //获取联系表单url 
 $（＃contactModal）。load（url，function（）{//将url加载到模态
 $这个）.modal（'show'）; //在url上显示模态加载
}）; 
 return false; //阻止点击传播
}）; 
 
 $（'。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> 
  

这是所有未经测试的，但它应该给你一个开始/迭代的好地方。 p>

Someone has asked the exact same question in April, without any answer. But since he provided too little information; the question was abandoned.

I have the same problem. Within a main_page.html I have this line:

<a href="/contact/edit/{{ item.id }}" title="Edit">edit</a>

Once you click there, the edit template shall appear inside a twitter bootstrap modal.

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)

This is usually how the contact.html would look like:

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

I could put that inside a <div class="modal-body">. But then how do I open the modal from view?

解决方案

Unless you need to use the contact form outside of the modal, this should work for you. If you do need to use it elsewhere, maintain two versions (one modal, one not). Also, a tip - give django-crispy-forms a lookover - it helps you render forms with twitter-bootstrap classes.

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>

Edit:

Ok, so now that I know that you have potentially multiple forms, it's probably a bad idea to render each form hidden within the html. You probably want to go to an ajax-y version, and load each form on demand. I'm assuming here that on form submit, the whole page will reload. If you want to asynchronously submit the form, there are answers elsewhere.

We'll start by re-defining the contact.html fragment. It should render within a modal, and contain all the markup necessary to play nice with the modal. The contact view that you have originally is fine - except that if the form is invalid, you'll end up rendering the contact.html and nothing else.

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

And now, your 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>

This is all untested, but it should give you a good place to start/iterate from.

这篇关于如何在twitter-bootstrap模态窗口中插入django表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！