如何在 twitterbootstrap 模式窗口中插入 django 表单

发布于07月01日

有人在4月份询问了确切的same question人，但没有给出任何答案.但由于他提供的信息太少；这个问题被放弃了.

我也有同样的问题.在main_page.html以内，我有这样一句话:

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

单击此处后，编辑模板将出现在twitter bootstrap 模式中.

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

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

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

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

如何在 twitterbootstrap 模式窗口中插入 django 表单

推荐答案

Django相关问答推荐

Django显示交叉表格

Djnago admin中 Select 字段的自定义查询

如何在Django表单中传递self.请求数据？

在Django中提交表单后更改模型数据

通过get_form_kwargs将请求传递给Django表单未能使表单访问self.request.user.

如何在Django模板中有条件地传递值给with变量？

CsrfViewMiddleware 和 enforce_csrf 有什么区别？

- 不支持的操作数类型：DateField和DateField

初始填充 Django 表单

EmailBackend 用于在 Django 中通过多个 SMTP 发送邮箱

DeleteView 中的success_message 未显示

Django：使用 Django ORM 实现 JOIN？

djangorestframework：过滤相关字段

超过 1 个外键

带有 Django 和 Python 的 Atlassian Bamboo - 可能吗？

在 docker 容器中创建 django 超级用户而不输入密码

现在如何在 Django 中处理每个对象的权限？

如何在 django 元素中开始做 TDD？

如何仅在某些情况下禁用 Django 的 csrf 保护？

RemovedInDjango18Warning：不推荐创建没有fields属性或 exclude属性的 ModelForm