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

查看:15
本文介绍了如何在 twitter-bootstrap 模式窗口中插入 django 表单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

我也有同样的问题.在 main_page.html 我有这一行:

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

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

单击此处后,编辑模板将出现在 twitter 引导模式中.

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)

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"> 中.但是,我如何从视图中打开模态?

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

推荐答案

除非您需要在模式之外使用联系表单,否则这应该适合您.如果您确实需要在其他地方使用它,请维护两个版本(一个是模态的,一个不是).另外,提示 - 给 django-crispy-forms 看看 - 它可以帮助您使用 twitter-bootstrap 呈现表单类.

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:

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

main_page.html

<html>
...

<a data-toggle="modal" href="#contactModal">Edit Contact</a>

{% include "contact.html" %}

...
</html>

好的,既然我知道您可能有多个表单,那么将每个表单隐藏在 html 中呈现可能是个坏主意.您可能想要使用 ajax-y 版本,并按需加载每个表单.我假设在提交表单时,整个页面都会重新加载.如果要异步提交表单,别处有答案.

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.

我们将从重新定义 contact.html 片段开始.它应该在模态中呈现,并包含与模态良好配合所需的所有标记.您最初拥有的 contact 视图很好 - 除了如果表单是 invalid,您最终将呈现 contact.html 和没有别的.

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>

现在,你的 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆